Javascript 在mvc中使用ajax将隐藏的模型数据传递给控制器

在使用ajax替换部分视图时，再次遇到了部分视图问题

我有一个局部视图，在加载页面时加载到页面上。此局部视图上有一个按钮，单击该按钮时，将用另一个局部视图替换该局部视图。在此之前，我是通过

@Ajax.ActionLink

完成这项工作的，并将页面的模型作为参数传递给控制器。这是正确的工作

但是，下一步是在新的局部视图上填写表单并提交，该表单将返回另一个局部视图。我在这里询问了如何做到这一点，并使用jquery事件委派使其工作

现在我试图用

$.Ajax

函数替换

@Ajax.ActionLink

，我的js脚本遇到了一个问题，其中视图或部分视图中已经存在的模型数据没有通过js传递给控制器

我的意思是：

我有一个名为ReviewPage的页面，它在加载时将调用一个返回部分视图的操作。此部分视图是根据传递给控制器的页面模型中的值确定的。返回的视图通常是\u nootes：

@model GuestPointerAppV4.Models.ViewModels.NotesOnCompanyViewModel

<div id="no_company_notes">
    <h4>Notes on Company</h4>

    <div class="row col-sm-6 col-sm-offset-6">
        <div class="text-center">
            @Html.HiddenFor(item => Model.RequestId)
            <div class="primary-action-bttn-border">
                <div class="primary-action-bttn-bkg">
                    <button data-gp-ajax="true" data-gp-target="#no_company_notes" value="Save" action="@Url.Action("_CompanyNotesEditGet", "NewSignUpRequestReview")" method="get" class="btn btn-default primary-action-bttn">
                        Add Note
                    </button>
                    @*@Ajax.ActionLink("Add Note", "_CompanyNotesEditGet", Model, new AjaxOptions { UpdateTargetId = "company_notes", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, new { @class = "btn btn-default primary-action-bttn" })*@
                </div>
            </div>
        </div>
    </div>

    <div class="row text-center padding-25-top">
        <p>There are no notes for this company.  Do you want to add some?</p>
    </div>

</div>

我希望尽可能地重用这个js，因此我利用自定义数据属性来帮助调用正确的函数（data gp ajax=“true”），并告诉脚本返回结果的位置（data gp target=“#targetid”）

问题是，在调试时，我发现虽然页面上的

Model.RequestId

不是0，但js没有提取该值并将其传递给控制器。因此，当我的控制器查找数据时，它没有找到它，并根据我试图传递的数据类型返回null或0

我做了一些研究，并尝试在部分视图中对模型本身进行编码，在模型键入之后，在部分视图代码的顶部使用以下代码：

@{ 
    var val = Json.Encode(Model);
}
<script type="text/javascript">
    var model1 = @Html.Raw(val)
</script>

我还尝试了

data:$model

和

data:$model.first（）

，但没有这样的运气。我设法调试并查看了我希望在js中看到的$model变量上的数据，因此我知道它正在那里，但在调用它时它没有传递给我的控制器

实际上，我要寻找的是一种干净可靠的方法，将页面的模型传递到JavaScript中，并让它传递给控制器，以便在返回部分视图以替换原始部分视图之前执行某些操作

想法

更新

以下是控制器的一个示例：

[HttpGet]
public ActionResult _CompanyNotesEditGet(NotesOnCompanyViewModel notesOnCompanyViewModel)
{
  //Some actions are taken on the model passed in and then repopulated to notesOnCompanyViewModel

    return PartialView("~/Views/NotesOnCompany/_CompanyNotesEdit.cshtml", notesOnCompanyViewModel);
}

---

但是，当我调试并且操作由$.ajax调用时，notesOnCompanyViewModel为空。即使我可以看到js函数应该传递一些数据。

您所需要的只是发送唯一的Id。为此，您只需覆盖button click事件并使用请求url中的Id进行ajax调用。如果您想利用Url帮助器方法生成操作方法的正确相对路径，您可以这样做，并将结果设置为按钮上的html5数据属性

<button id="addNote" 
    data-url="@Url.Action("_CompanyNotesEditGet", "NewSignUpRequestReview",
                                                           new { id=Model.RequestId})" >
                    Add Note
</button>

以及将单击事件ajaxify的脚本。您可以使用

load

方法进行ajax调用并更新DOM元素

$(function(){

   $(document).on("click","#addNote",function(e){
      e.preventDefault();
      var url=$(this).data("url");
      $("#no_company_notes").load(url);
   });

});

如果您正在编辑注释，在操作方法中，可以使用传入的Id从db读取注释实体

---

假设页面中没有脚本错误，这应该可以工作。

不清楚您试图向控制器发送什么（您没有显示控制器方法），但是您应该只传递模型的ID，而不是整个模型本身。而且

model1

已经是您的模型了，因此如果您确实想将原始模型传递回控制器（但那将是疯狂的），那么它将是

数据：model1

，并且您确实过度复杂化了所有这些

数据-*

属性并添加了无效属性（

操作
和
方法
）在您的
中，在视图中包含
数据-*
属性可能会过于复杂，但这会使js更具适应性（如果我能让它工作的话…），不会。但是您不应该将整个模型传递回GET方法（如果模型包含任何复杂对象的属性，那么它无论如何都会失败，并且您有可能超过查询字符串限制并引发异常）。只需传回模型的ID并再次获取数据对象。你不需要你的
@Html.HiddenFor（）
。你为什么要替换所有东西也不清楚。从上一个问题来看，您真正想要的似乎是显示一个弹出式模式表单。p实际上正在对变量
$model
（该变量已经是序列化模型）调用
.serialize（）
），但这也没有意义：）我明白了。我以为他在打电话给
$form
！
<button id="addNote" 
    data-url="@Url.Action("_CompanyNotesEditGet", "NewSignUpRequestReview",
                                                           new { id=Model.RequestId})" >
                    Add Note
</button>

public ActionResult _CompanyNotesEditGet(int id)
{
   var vm= new NotesOnCompanyViewModel { RequestId=id };
   //load other properties of vm as needed.
   return PartialView(""~/Views/NotesOnCompany/_CompanyNotesEdit.cshtml",vm);
}

$(function(){

   $(document).on("click","#addNote",function(e){
      e.preventDefault();
      var url=$(this).data("url");
      $("#no_company_notes").load(url);
   });

});