如何在MVC中使用jQueryAjax将viewmodel发布到action方法

我想使用$.POST或$.AJAX实现创建（插入）屏幕

注意：代码在没有AJAX调用的情况下运行良好。它已经存在了。。现在我需要进行ajax调用并保存，而不需要回发。 我写了以下代码：

在提交单击事件上，以下是代码：

$.ajax(
      {
          url: '@Url.Action("CreateProduct","ProductManagement")',
          dataType: 'json',
          contentType: 'application/json; charset=utf-8',
          type: 'post',
          data:   $('frm').serialize(),
          success: function () { alert('s'); },
          error: function (e1, e2, e3) { alert(e2); alert(e1 + ' ' + e2 + ' ' + e3); alert('failure event'); }
      }
    );
});

在服务器端：

[HttpPost]
public JsonResult CreateProduct(FormCollection frm)
{
    manager.ProductManager m = new manager.ProductManager();
    // m.InsertProduct(new common.DTO.ProductDTO() { Id = id, ProductName = ProductName, Description = Description, Cost = cost, ProductTypeId = 5 });
    return Json("'result':'success'", JsonRequestBehavior.AllowGet);
}

问题是，它每次都调用操作，但在

frm

参数param上找不到数据。 我还试图将as-View-model

ProductViewModel-vm

保留为参数，但它不起作用。只给了我null值。同样，在ajax调用中，它也取得了成功。问题只是控制器的动作上并没有任何内容

Html格式如下：

  @using (Html.BeginForm("CreateProduct", "ProductManagement", FormMethod.Post, new { id = "frm" }))
    {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset>
    <legend>ProductViewModel</legend>
    <div id="CreateDiv">
        <div class="editor-label">
            @Html.LabelFor(model => model.ProductName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProductName)
            @Html.ValidationMessageFor(model => model.ProductName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Cost)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Cost)
            @Html.ValidationMessageFor(model => model.Cost)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Description)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Description)
            @Html.ValidationMessageFor(model => model.Description)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ProductTypeId)
        </div>
        <div class="editor-field">
            @Html.DropDownList("ProductTypeId", "Choose item")
            @Html.ValidationMessageFor(model => model.ProductTypeId)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ProductTypeName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProductTypeName)
            @Html.ValidationMessageFor(model => model.ProductTypeName)
        </div>
    </div>
    <p>
        <input type="submit" value="Create" id="btnSubmit" />
    </p>

</fieldset>
 }

 <div>
 @Html.ActionLink("Back to List", "Index")
 </div>

@使用（Html.BeginForm（“CreateProduct”，“ProductManagement”，FormMethod.Post，new{id=“frm”}））
{
@Html.AntiForgeryToken（）
@Html.ValidationSummary（true）
ProductViewModel
@Html.LabelFor（model=>model.ProductName）
@Html.EditorFor（model=>model.ProductName）
@Html.ValidationMessageFor（model=>model.ProductName）
@LabelFor（model=>model.Cost）
@EditorFor（model=>model.Cost）
@Html.ValidationMessageFor（model=>model.Cost）
@LabelFor（model=>model.Description）
@EditorFor（model=>model.Description）
@Html.ValidationMessageFor（model=>model.Description）
@LabelFor（model=>model.ProductTypeId）
@Html.DropDownList（“ProductTypeId”，“选择项”）
@Html.ValidationMessageFor（model=>model.ProductTypeId）
@LabelFor（model=>model.ProductTypeName）
@Html.EditorFor（model=>model.ProductTypeName）
@Html.ValidationMessageFor（model=>model.ProductTypeName）


}
@ActionLink（“返回列表”、“索引”）

请告诉我这里出了什么问题

---

感谢您使用id选择器，您必须使用带有id的“#”

这将有助于：

$.ajax(
  {
      url: '@Url.Action("CreateProduct","ProductManagement")',
      dataType: 'json',
      contentType: 'application/json; charset=utf-8',
      type: 'post',
      data:   $('this').serialize(), OR  $('#frm').serialize(),   <-----------------
      success: function () { alert('s'); },
      error: function (e1, e2, e3) { alert(e2); alert(e1 + ' ' + e2 + ' ' + e3); alert('failure event'); }
  }
 );

---

您忘记添加id选择器：

$.ajax(
      {
          url: '@Url.Action("CreateProduct","ProductManagement")',
          dataType: 'json',
          contentType: 'application/json; charset=utf-8',
          type: 'post',
          data:   $('#frm').serialize(),                      // $('#frm');
          success: function () { alert('s'); },
          error: function (e1, e2, e3) { alert(e2); alert(e1 + ' ' + e2 + ' ' + e3); alert('failure event'); }
      }
    );

---

如果您的表单id为

frm

，则应按如下方式引用它

data:   $("#frm").serialize(),

---

在服务器端代码中，您忘记提供名为-[HTTPPost]no CreateProduct（）method.its der.的属性。。忘了发邮件了。抱歉。更新了上面的代码。@user3711357…现在正在获取表单值？？？好的，尝试过，但没有结果

frm.AllKeys.Count（）

为我提供

0

计数值，并且没有发布数据。甚至，在视图中，当我执行

警报（$（'ProductName'）.val（））时然后它还会给我未定义的值。我不明白怎么了。。没有ajax，一切都正常。嘿，试试这个警报（$（“#ProductName”）.val（）；你没有使用#哦，对不起。。。已获取正确值的警报。但是，formcollection上没有发布任何数据，它只给我计数0。现在，我在放入
警报（$（'#frm'）.serialize）
时收到警报，它显示序列化数据。现在，这一行
data:$（'#frm'）.serialize（），
不起作用。它向我发出错误警报，称为
内部服务器错误
，无法访问操作方法。让我们来看看。当我第一次启动响应时，您没有放置htlm。正如我所怀疑的那样，上述更改将解决问题。如果您看到您的答案已过时，则可以随时对其进行编辑。这比添加注释来解释为什么您的答案与OP提供的信息不再匹配要好。谢谢您的提示。从我的分数你可以看到我刚刚开始。我通常只看答案。我会掌握窍门的，不客气。我看过你的第一篇文章。这就是为什么给你这个提示；）你仍然可以通过用“而不是”来包装frm来改进你的文章。“references”应该是“referenced”：）你能告诉我你的意思吗？我无法想象这一点。如果你添加文本而不是代码，会不会让阅读变得更困难？
data:   $("#frm").serialize(),