MVC後使用JavaScript和顯示效果沒有完全回發

Question

我有一個MVC頁面，從3名不同的下拉列表中的用戶選擇值，然後在文本框輸入一個數字，根據這些選擇和輸入的數字我想要做一些計算，然後將結果顯示給用戶，而不必再次發佈整個頁面。據我所知，這可以使用JavaScript來解決，但我不是好書面javasript，所以我可以在我需要爲了得到這個工作在這裏添加使用一些幫助。當我點擊sumbmit按鈕頁面重新加載，它不會進入「DoCalculation」方法...我在這裏做錯了什麼？

<form name="myForm"> 
<div class="form-section col-md-12"> 
<h3 class="title_contanier">1: </h3> 
@Html.DropDownList("PrintType", ViewData["printType"] as List<SelectListItem>, new { @class = "form-control" }) 
</div> 

<div class="form-section col-md-12"> 
<h3 class="title_contanier">2: </h3> 
@Html.DropDownList("Papper", new SelectList(string.Empty, "Value", "Text"), "-", new { @class = "form-control" }) 
</div> 


<div class="form-section col-md-12"> 
<h3 class="title_contanier">3: </h3> 
@Html.DropDownList("PapperType", new SelectList(string.Empty, "Value", "Text"), "-", new { @class = "form-control" }) 
</div> 

<h3 class="title_contanier">Antal: </h3> 
<input type="text" placeholder="Skriv in antal" name="Qty" id="Qty"> 
<button type="button" id="submitBtn">skicka</button> 

<span id="resultMessage"></span> 
</form> 


<script type="text/javascript"> 
jQuery(document).ready(function ($) { 
    $('#PrintType').change(function() 
    { 
     $.getJSON('/Home/GetPapperByTypeId/?typeId=' + $('#PrintType').val(), function (data) 
     { 
      var items = '<option>Välj papper..</option>'; 
      $.each(data, function (i, printtype) 
      { 
       items += "<option value='" + printtype.Value + "'>" + printtype.Text + "</option>"; 
      }); 
      $('#Papper').html(items); 
     }); 
    }); 

    $('#Papper').change(function() 
    { 
     $.getJSON('/Home/GetOptions/?ppai=' + $('#Papper').val() + '&tid=' + $('#PrintType').val(), function (data) 
     { 
      var items = '<option>Välj option</option>'; 
      $.each(data, function (i, pappertype) 
      { 
       items += "<option value='" + pappertype.Value + "'>" + pappertype.Text + "</option>"; 
      }); 
      $('#PapperType').html(items); 
     }); 
    }); 
}); 
</script> 


<script type="text/javascript"> 
jQuery(document) 
    .ready(function($) { 
     $('#submitBtn').on("click", function() { 
      var papper = $('#Papper :selected').val(); 
      var papperType = $('#PapperType :selected').val(); 
      var qty = $('#Qty').val(); 

      var request = { 
       "method": "POST", 
       "url": "@Url.Content("/Home/DoCalculation/")", 
       "data": { "Order": { "Papper": papper, "PapperType": papperType, "Qty": qty } } 
      } 

      $.ajax(request) 
       .success(function(response) { 
        if (response.success == true) { 
         $('#resultMessage').text(response.result); 
        } 
       }); 
     }); 
    }) 
</script> 



public ActionResult Index() 
{ 
ViewData["printType"] = Repository.GetAllPrintingTypes(); 
return View(); 
} 

public class PapperOrder 
{ 
public string Papper { get; set; } 
public string PapperType { get; set; } 
public int Qty { get; set; } 
} 

public ActionResult DoCalculation(PapperOrder order) 
{ 
var papper = order.Papper; 
var papperType = order.PapperType; 
var qty = order.Qty; 
var model = new CalculatedPrice { Totalsum = qty }; 
return Json(model, JsonRequestBehavior.AllowGet); 
} 

Answer 1

你可以通過簡單的JQuery AJAX請求來做到這一點。

var papper = $('#Papper :selected').val(); 
var papperType = $('#PapperType :selected').val(); 
var qty = $('#Qty').val(); 

var request = { 
    "method" : "POST", 
    "url" : "@Url.Content("ControllerName/DoCalculation")", 
    "data" : { "Order":{ "Papper" : papper,"PapperType":papperType,"Qty" : qty}}, 
} 

$.ajax(request) 
.success(function(response){ 
//do whatever you want to do with data 
}) 

您也可以讓事情變得更容易通過創建您的服務器端的模型，把它PapperOrder

public class PapperOrder { 

    public string Papper {get;set;} 
    public string PapperType {get;set;} 
    public int Qty {get;set;} 
    } 

如下

public ActionResult DoCalculation(PapperOrder order){ 
     var Papper = order.Papper; 
     var PapperType = order.PapperType; 
     var Qty = order.Qty; 
    // do further calculations here 
    } 

現在更新控制器當你問到如何以成功方法顯示計算結果，而不是遵循以下幾點。

1. 你必須從你的控制器行動「DoCalculation」像返回JSON下面

   public ActionResult DoCalculation(PapperOrder order){ 
   
       //after calculation 
   
       return Json(new {success = true, result = "12 (or whatever your calculated value is)"}); 
       } 
   

現在你的AJAX的成功方法，你可以做任何事情裏面，我想你要顯示的結果裏面一個div所以創建div

<div id="result"></div> 

並在你的成功方法

success:function(response){ 
    if(response.success == true){ 
     $('#result').text(response.result); 
     } 
    } 

Answer 2

所有，而不是Html.BeginForm首先使用Ajax.BeginForm

當然

@using (Ajax.BeginForm("DoCalculation", "YourControllerName", null new AjaxOptions { OnSuccess = "yourHandleResponseFunction"}, new { id = "myForm", name = "form_search" })) 
{ 
    <div class="form-section col-md-12"> 
     <h3 class="title_contanier">1: </h3> 
     @Html.DropDownList("PrintType", ViewData["printType"] as List<SelectListItem>, new { @class = "form-control" }) 
    </div> 

    <div class="form-section col-md-12"> 
     <h3 class="title_contanier">2: </h3> 
     @Html.DropDownList("Papper", new SelectList(string.Empty, "Value", "Text"), "-", new { @class = "form-control" }) 
    </div> 


    <div class="form-section col-md-12"> 
     <h3 class="title_contanier">3: </h3> 
     @Html.DropDownList("PapperType", new SelectList(string.Empty, "Value", "Text"), "-", new { @class = "form-control" }) 
    </div> 

    <h3 class="title_contanier">Antal: </h3> 
    <input type="text" placeholder="Skriv in antal" name="Qty" id="Qty"> 
    <button type="submit" class="btn_submit_quick_search btn_submit_search pull-right" name="btn_submit_section_search_id_mls">calculate</button> 

    <span id="resultMessage"></span> 
} 

<script> 
    function yourHandleResponseFunction(data) 
    { 
     //process your data here 
     $('#resultMessage').html(data.Totalsum); 
    } 
</script> 

響應數據結構必須匹配您從服務器發送的一個：

public ActionResult DoCalculation(PapperOrder order) 
{ 
    var papper = order.Papper; 
    var papperType = order.PapperType; 
    var qty = order.Qty; 
    var model = new CalculatedPrice { Totalsum = qty }; 
    return Json(model, JsonRequestBehavior.AllowGet); 
}