如何将数据从局部视图传递到 mvc4 中的发布操作方法？

Question

您好，我有一个名为 Customer 的视图。在该视图中，我有一个名为 Area 的字段。我在区域附近保留了一个添加按钮。假设如果区域不在列表中意味着我单击添加按钮它会打开 AreaPartialView 作为弹出窗口。

现在我有一个问题。那就是数据没有从局部视图传递到控制器的 post action 方法。

我的模型

    public Nullable<System.Guid> AreaID { get; set; }
    public string Area { get; set; }
    public Nullable<System.Guid> CityID{ get; set; }
    public string  City { get; set; }

我的控制器

    public ActionResult AreaPartialView()
   {
       ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName");
       return View("AreaPartialView");
   }
  [HttpPost]

   public ActionResult AddAreaInfo(CustomerViewModel objareaVM)
   {
        var objAreaID = Guid.NewGuid();
        ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName", objareaVM.CityID);

      var ObjArea = new Area()
        {
            AreaID =objAreaID,
            DisplayName = objareaVM.Area,
            PrintName = objareaVM.Area,
            CityID = objareaVM.CityID,
            IsActive = true,
            IsDeleted = false,
            CreatedDate = DateTime.Now,
            EditedDate = DateTime.Now,
            LastActiveOn = DateTime.Now,
            RowID = Guid.NewGuid(),
            CreatedSessionID = Guid.NewGuid(),
            EditedSessionID = Guid.NewGuid(),
            OfflineMode = false,
            OfflineID = Guid.NewGuid()
        };

        db.Areas.Add(ObjArea);
        db.SaveChanges();
        ModelState.Clear();

        return Json("Customer", JsonRequestBehavior.AllowGet);

 }

我的观点

   <div id="Area">
   <div class="col-sm-4">
   <div class="form-group">
   @Html.LabelFor(model => model.Area, new { @class = "control-label"})
   @Html.DropDownList("AreaID", null, "Select", new { @class = "form-control required" })
   <button id="AddArea">Area</button>
   <div id="AddAreaNew"></div>
            </div>
          </div>
       </div>

我的 j 查询

   <script src="~/Scripts/jquery-1.10.2-ui.js"></script>
   <link rel="stylesheet"href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

    <script type="text/javascript">
   $("#AddArea").click(function () {
       $('#AddAreaNew').dialog("open");
     });
  $(function () {
       $('#AddAreaNew').dialog({
           autoOpen: false,
           width: 400,
           height: 500,
           resizable: false,
           title: 'Add Area',
           modal: true,
           open: function (event, ui) {
               $(this).load("@Url.Action("AreaPartialView", "Customer")");
           },
           buttons: {
               "Close": function () {
                   $(this).dialog("close");
               }
           }
       });
   });

我的部分观点

   @Html.Label("Area" , new { @class = "control-label" })
   @Html.TextBoxFor(model => model.Area, new { @class = "form-control", type = "text" ,id ="AreaName"})
   @Html.ValidationMessageFor(model => model.Area)


  @Html.Label("City")        
  @Html.DropDownList("CityID", null, "Select", new { @class = "form-control " })


  <script src="~/Scripts/jquery-1.10.4-ui.min.js"></script>
  <link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
  <script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
  <script type="text/javascript">
  function SaveArea() {
    var Area = $("#AreaName").val();
    var CityID = $("#CityID").val();
    alert(Area);
    var AreaAdd = {
        "AreaName": Area, "CityID": CityID
                };
    alert(AreaAdd.AreaName);
    alert(AreaAdd.CityID);

    $.post("/Customer/AddAreaInfo", AreaAdd,
    function (data) { if (data == 0) { location = location.href; } }, 'json').success(function (data) {

        alert("success");
        //window.close();
    });
 }
</script>

如果我单击添加按钮区域部分视图将作为弹出窗口打开，如果我输入详细信息并单击创建按钮，它将获取值并显示所有警报消息。但问题是它没有将 Area 值传递给 post 操作方法，它传递了 City ID 值，但没有将 Area 值传递给 post 方法。面积值将始终为空。

请任何人交叉检查我的代码并告诉我解决方案。

提前谢谢...

Answer 1

查看你的模型类，你有类属性的“区域”名称。

public string Area { get; set; }

而且你用“AreaName”发布区域，所以它不正确

   var AreaAdd = {
    "AreaName": Area, "CityID": CityID
            };

现在更改您的部分视图 Jquery 代码：

    var AreaAdd = {
    "Area": Area, "CityID": CityID
            };

Answer 2

这将为您解决问题：

var AreaAdd = {Area:"your area", CityID:"your city id"};

实际上在mvc中名称应该与模型属性的名称完全相同。

Answer 3

我不熟悉 asp.net 试试这个改变

 var AreaAdd = { Area: Area, CityID: CityID };

或使用FormCollection

 public ActionResult AddAreaInfo(FormCollection objareaVM)
   {
        var objAreaID = Guid.NewGuid();
        ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName", objareaVM["CityID"]);

      var ObjArea = new Area()
        {
            AreaID =objAreaID,
            DisplayName = objareaVM["AreaName"],
            PrintName = objareaVM["AreaName"],
            CityID = objareaVM["CityID"],
            IsActive = true,
            IsDeleted = false,
            CreatedDate = DateTime.Now,
            EditedDate = DateTime.Now,
            LastActiveOn = DateTime.Now,
            RowID = Guid.NewGuid(),
            CreatedSessionID = Guid.NewGuid(),
            EditedSessionID = Guid.NewGuid(),
            OfflineMode = false,
            OfflineID = Guid.NewGuid()
        };

        db.Areas.Add(ObjArea);
        db.SaveChanges();
        ModelState.Clear();

        return Json("Customer", JsonRequestBehavior.AllowGet);

 }