來自MVC控制器的JQuery Popup

Question

我剛開始探索asp mvc和jquery。

我有一個簡單的窗體，有2個字段，日期和金額。

我想要實現的行爲是，當表單提交時，如果記錄不存在於我的數據庫中，然後添加項目。如果它已經存在，則發出警告並要求用戶確認。如果用戶繼續覆蓋現有記錄。

這裏是我的標記

<% using (Html.BeginForm()) 
     { %> 
    <div> 
     <%:Html.LabelFor(mod => Model.bal.Date) %> 
    </div> 
    <div> 
     <%: Html.TextBoxFor(mod => Model.bal.Date)%> 
     <%:Html.ValidationMessageFor(mod => Model.bal.Date)%> 
    </div> 
    <div> 
     <%: Html.LabelFor(mod => Model.bal.Amount)%> 
    </div> 
    <div> 
     <%: Html.TextBoxFor(mod => Model.bal.Amount)%> 
     <%: Html.ValidationMessageFor(mod => Model.bal.Amount)%> 
    </div> 
    <p> 
     <input type="submit" value="Create" /> 

這裏是我的控制器代碼

 [HttpPost] 
     public ActionResult Index(Balance bal) 
     { 

      var dataContext = new DataDataContext(); 
      if (ModelState.IsValid) 
      { 
       // Check if exsists 
       if (dataContext.Balances.ToList().Contains(bal, new BalanceEquality())) 
       { 
        //Exsists, Warn then edit 
        // Add code here to open popup 
        // if Continue then over write exsisting data in db 

       } 
       else 
       { 
        //Not exsist, insert 
        dataContext.Balances.InsertOnSubmit(bal); 
        dataContext.SubmitChanges(); 
       } 
      } 

      compModel myModel = new compModel(); 
      myModel.bal = bal; 
      myModel.allBalances = dataContext.Balances.OrderBy(ball => ball.Date).ToList(); 
      return View(myModel); 
     } 

我的問題是如何顯示和從我的控制器內得到一個jQuery彈出的結果。

我想到了設置ViewData的集合中的變量，但是這似乎並不像「最佳實踐」給我

感謝

Answer 1

你是在你執行錯誤的結束對不起，控制器獨立於視圖，即在執行Controller代碼的過程中，除了返回View外，您不能回覆響應。你可以做至少四件事之一（我確信還有其他解決方案）：

1 - 使用Ajax調用JsonResult控制器方法，確定在單擊提交按鈕後該條目是否已存在 - 那麼根據查詢的結果，你可以顯示一個彈出窗口，其中「是」提交表單並覆蓋，或者「否」停止正在提交的表單。

2 - 您可以返回視圖（無需將查詢提交給數據庫）並要求用戶確認覆蓋現有記錄 - 但您必須添加一些附加邏輯，如隱藏輸入字段以確定用戶已經看到該消息並且已經同意覆蓋。這不是一個好方法，對用戶來說可能不會很直觀。

3 - 將「覆蓋現有記錄」複選框添加到確認用戶希望覆蓋已存在的數據的表單中。

4 - 邏輯上分開爲用戶添加和編輯，以便當用戶想要更新現有記錄時，他們從列表中選擇記錄並編輯現有數據 - 這將是我認爲最傳統的方法。然後，如果用戶嘗試添加與現有項目相同的新項目，則只需重新顯示該頁面，並顯示一條錯誤消息，指出該記錄已存在。

Answer 2

我繼續並實施了答案的第一個選項。

堅持傳統的添加和編輯場景，並使用標準的asp mvc模式肯定會更容易。但這是一個很好的學習經歷。

繼承人的代碼和標記，它仍然需要一些更多的工作，但你明白了。任何意見/建議，將不勝感激。

 function validate() { 

     // Need to do form validation 
     var balance = {}; 
     balance.date = $("#bal_Date").val(); 
     balance.amount = $("#bal_Amount").val(); 
     $.post("balance/validate" 
       , balance 
       , function (data) { 
        if (data.valid) { 
         $("#existCheck").val("Valid"); 
         checkBalanceExist(); 
        } 
        else { 
         $("#existCheck").val("Not Valid"); 
         $("#errorMessage").text(data.message); 
        } 
       } 
       , 'json' 
       ); 
    }; 






    function checkBalanceExist() { 

     $("#existCheck").val($("#bal_Date").val()); 


     // Do ajax call to see if balance exist 
     var balance = {}; 
     balance.date = $("#bal_Date").val(); 
     balance.amount = $("#bal_Amount").val(); 
     $.post("balance/doesBalanceExist" 
       , balance 
       , balanceCheckPost 
       , 'json' 
       ); 
    }; 


    balanceCheckPost = function (data) { 
     $("#existCheck").val(data); 
     if (data) { 
      // Does Exist 
      $("#existCheck").val("Exist"); 
      // raise confirmation popup 


      $('#dialog').dialog('open'); 

     } 
     else { 
      // Does Not Exist 
      $("#existCheck").val("NOT Exist"); 

      // insert Item 
      var balance = {}; 
      balance.date = $("#bal_Date").val(); 
      balance.amount = $("#bal_Amount").val(); 
      $.post("balance/insert", 
       balance, 
       confirmChange 
       ); 
     } 

    }; 



    function overWriteBalance() { 
     // insert Item 
     var balance = {}; 
     balance.date = $("#bal_Date").val(); 
     balance.amount = $("#bal_Amount").val(); 
     $.post("balance/edit", 
       balance, 
       confirmChange 
       ); 
    }; 




    confirmChange = function() { 
     $("#existCheck").val("Changed"); 
    }; 

和

public JsonResult validate(Balance bal) 
    { 
     if (ModelState.IsValid) 
     { 
      return Json(new { valid = true }); 
     } 
     else 
     { 
      var errorMessage = ""; 
      foreach (var key in ModelState.Keys) 
      { 
       errorMessage += ModelState[key].Errors.FirstOrDefault().ErrorMessage; 

      } 
      return Json(new { valid = false, message = errorMessage }); 
     } 
    } 

    public JsonResult doesBalanceExist(Balance bal) 
    { 
     var dataContext = new DataDataContext(); 
     return Json(dataContext.Balances.ToList().Contains(bal, new BalanceEquality())); 
    } 

    public ActionResult Index() 
    { 
     var dataContext = new DataDataContext(); 

     compModel myModel = new compModel(); 
     myModel.bal = new Balance(); 
     myModel.allBalances = dataContext.Balances.OrderBy(bal => bal.Date).ToList(); 

     return View(myModel); 
    } 

    [HttpPost] 
    public ActionResult Index(Balance bal) 
    { 
     var dataContext = new DataDataContext(); 

     compModel myModel = new compModel(); 
     myModel.bal = new Balance(); 
     myModel.allBalances = dataContext.Balances.OrderBy(ball => ball.Date).ToList(); 

     return View(myModel); 



    } 

    public void insert(Balance bal) 
    { 
     var dataContext = new DataDataContext(); 
     dataContext.Balances.InsertOnSubmit(bal); 
     dataContext.SubmitChanges(); 
    } 


    public void edit(Balance bal) 
    { 
     var dataContext = new DataDataContext(); 
     var balToEdit = dataContext.Balances.Single(b => b.Date == bal.Date); 
     balToEdit.Amount = bal.Amount; 
     dataContext.SubmitChanges(); 
    } 

}