Javascript 从文本框获取数据以传递给控制器，而无需在MVC中刷新页面/提交表单_Javascript_C#_Html_Asp.net Mvc

Javascript 从文本框获取数据以传递给控制器，而无需在MVC中刷新页面/提交表单

javascript c# html asp.net-mvc

Javascript 从文本框获取数据以传递给控制器，而无需在MVC中刷新页面/提交表单,javascript,c#,html,asp.net-mvc,Javascript,C#,Html,Asp.net Mvc,现在，在我的页面上，我的一个视图顶部有一个按钮findproject，按下该按钮时，会在页面底部呈现部分视图（即表格）。我的布局格式如下： <body> <div class="navbar navbar-inverse navbar-fixed-top">  </div> <div class="container body-content">

现在，在我的页面上，我的一个视图顶部有一个按钮

findproject

，按下该按钮时，会在页面底部呈现部分视图（即表格）。我的布局格式如下：

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <!--this is my navbar-->
    </div>
    <div class="container body-content">
        @RenderBody()
    </div>

    <div class="wrapper">
        <!-- TABLE WILL APPEAR HERE -->
    </div>
</body>

/Projects/SearchTable

是呈现局部视图的控制器操作：

[HttpGet]
public ActionResult SearchTable()
{
    var states = GetAllStates();
    var model = new ProjectClearanceApp.Models.ProjectViewModel();

    model.States = GetSelectListItems(states);
    model.Projects = from m in db.Projects select m;

    return PartialView("~/Views/Projects/_ClearedProjects.cshtml", model);
}

文本框分散在我的主视图中，所有文本框都以相同的格式显示：

<div class="col-md-5 entry-field">
    @Html.LabelFor(model => model.Project.FirstNamedInsured, htmlAttributes: new { @class = "control-label" })
    @Html.TextBoxFor(model => model.Project.FirstNamedInsured, new { @class = "form-control text-box single-line", maxlength=150 })
    @Html.ValidationMessageFor(model => model.Project.FirstNamedInsured, "", new { @class = "text-danger" })
</div>


@LabelFor（model=>model.Project.FirstNamedInsured，htmlAttributes:new{@class=“controllabel”}）
@Html.TextBoxFor（model=>model.Project.FirstNamedInsured，新的{@class=“表单控制文本框单行”，maxlength=150}）
@Html.ValidationMessageFor（model=>model.Project.FirstNamedInsured，“，new{@class=“text danger”}）

除了两个格式如下的下拉列表：

 <div class="col-md-3 address-info">
     @Html.LabelFor(m => m.Project.FirstNamedInsuredAddress.State, htmlAttributes: new { @class = "address-label" })
     @Html.DropDownListFor(m => m.Project.FirstNamedInsuredAddress.State,
                           Model.States,
                           "--",
                           new { @class = "form-control address-entry" })
    @Html.ValidationMessageFor(model => model.Project.FirstNamedInsuredAddress.State, "", new { @class = "text-danger" })
</div>


@LabelFor（m=>m.Project.FirstNamedInsuredAddress.State，htmlAttributes:new{@class=“address label”}）
@Html.DropDownListFor（m=>m.Project.FirstNamedInsuredAddress.State，
示范国，
"--",
新的{@class=“表单控制地址条目”}）
@Html.ValidationMessageFor（model=>model.Project.FirstNamedInsuredAddress.State，“，新{@class=“text danger”}）

其中Model.States是可枚举的，用于填充包含所有状态的下拉列表

是否可以从这些文本框中获取数据，并将其作为数据/参数传递给控制器，以便在部分视图中使用，而无需提交表单或刷新页面？

按如下方式发送参数：

        public ActionResult SearchTable(string firstNamedInsured)
        {
            //Use the parameter in the model or any where
            var states = GetAllStates();
            var model = new ProjectClearanceApp.Models.ProjectViewModel();

            model.States = GetSelectListItems(states);
            model.Projects = from m in db.Projects select m;

            return PartialView("~/Views/Projects/_ClearedProjects.cshtml", model);
        }

和javascript：

$(document).ready(function () {
        $("#show").on("click", function () {
            $.ajax({
                url: '/Projects/SearchTable?firstNamedInsured=' + $('#' + @Html.IdFor(m => m.Project.FirstNamedInsured)).val(),
                type: "GET"
            }).done(function (partialViewResult) {
                $(".wrapper").html(partialViewResult);
                $(".wrapper").css('display', 'block');
                });
        });
    });

$(document).ready(function () {
        $("#show").on("click", function () {
            $.ajax({
                url: '/Projects/SearchTable?firstNamedInsured=' + $('#' + @Html.IdFor(m => m.Project.FirstNamedInsured)).val(),
                type: "GET"
            }).done(function (partialViewResult) {
                $(".wrapper").html(partialViewResult);
                $(".wrapper").css('display', 'block');
                });
        });
    });