将数据从模式弹出窗口传递到控制器

Question

我正在尝试使用 Javascript 和 Ajax 从引导模式弹出窗口向我的控制器发送一个参数，但是当我单击按钮时，控制器上不起作用。如何发送此参数？

这是我的模态 HTML 代码

<div class="modal fade" role="dialog" id="mymodal">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button class="close" type="button" data-dismiss="modal">&times;</button>

            <label for="infoh" id="info" name="info"></label>
          <input type="hidden" id="infoh" name="infoh" value="" />
        </div> 
        <div class="modal-body">

                <div class="row">
                    <div class="col-md-3">
                        @Html.Label("Product : ")
                    </div>
                    <div class="col-md-3">
                        <input type="number" class="input-sm"  id="product" name="product"/>
                    </div>
            </div><br />

            <div class="row">
                <div class="col-md-3">
                    @Html.Label("Price : ")
                </div>
                <div class="col-md-3">
                    <input type="number" class="input-sm" id="price" name="price"/>
                </div>
            </div>

        </div>
        <div class="modal-footer">
            <button class="btn btn-success" id="change"  onclick="func(this)"  name="change">@Html.Label("change") </button>
        </div>
    </div>
</div>

模态工作正常 这个 Jscript 代码

@section Scripts{
<script type="text/javascript">




  func(x) {
      var pricee = document.getElementById("price").value;
      var productt = document.getElementById("product").value;
      var info = document.getElementById("infoh").value;
      $.ajax({
          url: 'myController/Action',
          type: 'POST',
          data: { 'info': info, 'price': pricee, 'product': prdocutt },
          success: function () {
              alert("done");
          }
      });

            }



</script>

}

和我的控制器，这些代码甚至无法触发

  [HttpPost]
    public ActionResult Action(string info,double price,double product)

    {
        db Entities updateaction = new dbEntities();
        int id = (Convert.ToInt32(Session["id"]));

        string myinfo = info;
       Product pp= updateaction.Product.Where(m => m.database_id.Equals(id) && m.name.Equals(myinfo)).SingleOrDefault();
        pp.price = price;
        pp.product = product;
        int i= updateaction.SaveChanges();
        Session["warning"] = i;
        return View();
    }

我正在使用 Opera 浏览器，我无法在我的代码上设置断点。

Answer 1

将所有输入放在表单标签内：

<form enctype="multipart/form-data">
<div class="modal fade" role="dialog" id="mymodal">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button class="close" type="button" data-dismiss="modal">&times;</button>

            <label for="infoh" id="info" name="info"></label>
          <input type="hidden" id="infoh" name="infoh" value="" />
        </div> 
        <div class="modal-body">

                <div class="row">
                    <div class="col-md-3">
                        @Html.Label("Product : ")
                    </div>
                    <div class="col-md-3">
                        <input type="number" class="input-sm"  id="product" name="product"/>
                    </div>
            </div><br />

            <div class="row">
                <div class="col-md-3">
                    @Html.Label("Price : ")
                </div>
                <div class="col-md-3">
                    <input type="number" class="input-sm" id="price" name="price"/>
                </div>
            </div>

        </div>
        <div class="modal-footer">
            <button class="btn btn-success" id="change"  onclick="func(this)"  name="change">@Html.Label("change") </button>
        </div>
    </div>
</div>
</form>

JavaScript 代码

function func(x) {
    var pricee = document.getElementById("price").value;
    var productt = document.getElementById("product").value;
    var info = document.getElementById("infoh").value;
    $.ajax({
        url: '@Url.Content("~/myController/Action/")',
        type: 'POST',
        dataType: 'application/json',
        data: { 'info': info, 'price': pricee, 'product': productt },
         success: function (response) {
            alert(responseText.text);
        }
    });

}

采用 JSON 发布方式：

   [HttpPost]
    public JsonResult Action(string info, double price, double product)
    {
        db Entities updateaction = new dbEntities();
        int id = (Convert.ToInt32(Session["id"]));

        string myinfo = info;
        Product pp = updateaction.Product.Where(m => m.database_id.Equals(id) && m.name.Equals(myinfo)).SingleOrDefault();
        pp.price = price;
        pp.product = product;
        int i = updateaction.SaveChanges();
        Session["warning"] = i;
        return Json(new { success = true, responseText = " Sucessfully." }, JsonRequestBehavior.AllowGet);
    }

Answer 2

你的 Javascript 函数有很多问题，这里是正确的：

function func(x) {
        var pricee = document.getElementById("price").value;
        var productt = document.getElementById("product").value;
        var info = document.getElementById("infoh").value;
        $.ajax({
            url: '@Url.Content("~/myController/Action/")',
            type: 'POST',
            dataType: 'application/json',
            data: { 'info': info, 'price': pricee, 'product': productt },
            success: function () {
                alert("done");
            }
        });

    }