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

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“data”参数中传递的模型未填充 TextBoxFor 值。

这是我的 View Controller ActionResult:

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

        return View(model);
    }

发生的情况是我的模型正在 Controller 上实例化，但 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 对象。当我到达 Controller 方法“Search”时，通过 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; }

Controller 操作

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

Answer 1

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

@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>

请记住，序列化方法将为您提供此特定表单内项目的输入元素值。如果您想发送一些其他数据(例如:Id)，您需要将其保留在此表单内的输入字段中。