如何在javascript函数中获取模型值并将其传递给控制器​​？

Question

我的 CSHTML 页面上有一个模型，我使用这种方式：

@model Web.Models.Element

@using (Html.BeginForm("Search", "Company"))
{
@Html.HiddenFor(c => c.Person)

<div class="panel panel-default">
    <div class="panel-heading"> Company Search</div>
    <div class="panel-body collapse" id="screenCompanySearch">
        <form id="formSearch" name="formSearch" method="post">
            <fieldset style="margin: 20px;">
                <legend>Search</legend>

                <div class="row">
                    <div class="col-xs-2 col-sm-2">
                        @Html.Label("Company Name")
                        @Html.TextBoxFor(c => c.Company.Name, new { @class = "form-control" })
                    </div>
           </fieldset>
        </form>
    </div>
</div>

我的 Javascript 函数是通过这样的按钮单击调用的：

$("#btnSearch").on("click", function() { searchCompany(); })'

在我的 JavaScript 函数中，我需要让这个模型完全加载 TextBoxFor 值：

<script type="text/javascript">
function searchCompany() {
   var data = $("#formSearch").serialize();
    $.ajax({
        url: "@(Url.Action("SearchCompany", "Company"))",
        cache: false,
        data: data,
        type: "POST",
        success: alert("sucesso!")
    });
}
</script>

我的 Controller 方法正在正确加载，但在 Ajax“数据”参数中传递的模型未填充 TextBoxFor 值。

这是视图的控制器 ActionResult：

public ActionResult Consulta()
    {
        Element model = new Element();
        model.Person = new Person();

        return View(model);
    }

发生的情况是我的模型正在我的控制器上实例化，但来自 TextBoxFor 的值没有记录在模型的属性中。

我该如何解决这个问题？现在谢谢。

更新

<div class="col-xs-2 col-sm-2">
     @Html.Label("Person Name")
     @Html.TextBoxFor(c => c.Person.Name, new { @class = "form-control" })
</div>

所以，'c' 等于我的 Element 对象。当我到达控制器方法“搜索”时，通过 ajax 调用传递的参数 Element 不会实例化 Element.Person 这给我 Person = null。

在我的 ActionResult 我有：

Element model = new Element();
model.Person = new Person();

元素类：

public Element()
{
    this.Contacts = new List<Contact>();
    this.DataType = new DataType();

}

public int ID_Element { get; set; }
public int ID_ElementType { get; set; }

public virtual List<Contact> Contacts { get; set; }
public virtual DataType DataType { get; set; }
public virtual Person Person {get; set; }

控制器动作

[HttpPost]
public JsonResult SearchCompany(Element model)
{
    ...
}

Answer 1

serialize 方法没有提供表单的序列化版本，因为您有嵌套的表单标签。

@using (Html.BeginForm("Search", "Company")) 将创建一个外部表单标记，并且您在其中有另一个表单，因此创建了一个嵌套表单结构。嵌套表单无效。同一页面中可以有 2 个表单，彼此平行，不嵌套。

如果你修复了嵌套表单问题，序列化方法将为你的表单输入提供有效的字符串。

@using (Html.BeginForm("Search", "Company"))
{
   <!-- Your other form -->
}

<form id="formSearch" name="formSearch" method="post">
    <fieldset style="margin: 20px;">
        <legend>Search</legend>

        <div class="col-xs-2 col-sm-2">
            @Html.Label("Company Name")
            @Html.TextBoxFor(c => c.Company.Name, new { @class = "form-control" })
        </div>
    </fieldset>
</form>

请记住，serialize 方法将为您提供此特定表单内项目的输入元素值。如果您想发送一些其他数据（例如：Id），您需要将其保存在此表单内的输入字段中。