Question

我有一个mvc页面，用户从3个不同的下拉列表中选择值，然后在文本字段中输入一个数字，根据这些选择和输入的数字我想做一些计算，然后将结果显示给用户整个页面再次发布。我知道这可以使用javascript解决，但是我不能很好地编写javasript所以我可以在这里使用一些帮助我需要添加的内容才能使其工作。单击sumbmit按钮时，页面会重新加载，并且不会进入＆＃34; DoCalculation＆＃34;方法......我在这里做错了什么？

<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
  }

当您询问如何在成功方法中显示计算结果时，请遵循以下几点。

您必须从控制器操作中返回Json＆＃34; DoCalculation＆＃34;如下所示

   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

首先使用Ajax.BeginForm

代替Html.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);
}

mvc post使用javascript并显示结果而没有完整的回发

2 个答案: