使用 ajax 部分视图调用从输入中获取视图中模型数据/对象的最简单方法答案

【问题标题】：Simplest way to get model data/objects in the view from input with an ajax partial view call(s)使用 ajax 部分视图调用从输入中获取视图中模型数据/对象的最简单方法
【发布时间】：2016-09-05 01:48:28
【问题描述】：

你好，我用谷歌搜索找到了我的问题的解决方案，每个链接都把我带到了 asp 表单解决方案，或者不要求表单输入的解决方案，这个问题有表单输入，我似乎也找不到寻求帮助的链接，什么我的要求很简单：通过 ajax 调用通过模型从用户输入中获取数据。

查看（index.cshtml）：

@model UIPractice.Models.ModelVariables

<!-- Use your own js file, etc.-->
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>

<div id="div1">

@Html.BeginForm(){ @Html.TextBoxFor(x => x.test1, new { style = "width:30px" })}




<button id="hello"></button>
</div>

<div id="result1"></div>

 <script type="text/javascript">

//Job is to load partial view on click along with model's objects
$(document).ready(function () {
    $('#hello').click(function () {

        $.ajax({
            type: 'POST',
            url: '@Url.Action("HelloAjax", "Home")',
data: $('form').serialize(),
            success: function (result) {
                $('#result1').html(result);
            }

        });
    });
});

模型（ModelVariables.cs）：

 public class ModelVariables
{
//simple string that holds the users text input
   public string test1 { get; set; }

}

控制器（HomeController.cs）：

 // GET: Home
    public ActionResult Index()
    {
        ModelVariables model = new ModelVariables();
        return View(model);
    }

    public ActionResult HelloAjax(ModelVariables model)
    {


        ViewBag.One = model.test1;`
        return PartialView("_MPartial", model);
    }

部分视图 (_MPartial.cshtml)：

@model UIPractice.Models.ModelVariables



@{
<div>
    <!--if code runs, i get a blank answer, odd...-->
    @Model.test1
    @ViewBag.One
</div>    
}

所以继续复制/粘贴代码来运行，你会注意到当你点击按钮时你什么也得不到，用户文本输入，奇怪...

【问题讨论】：

您没有在 ajax 调用中发送任何数据。如果文本框在表单标签内（应该是），则添加data: $('form').serialize(),（或者data: { test1, $('#test1').val() },）
@StephenMuecke 嘿，我添加了“数据表单序列化”并添加了“开始表单（）”也不起作用：/
我必须是@using (Html.BeginForm()) { @Html.TextBoxFor(x => x.test1) }（或者你可以使用<form>@Html.TextBoxFor(x => x.test1)</form>（你还需要<button id="hello" type="button">...</button>，所以它也不能正常提交。
@StephenMuecke 谢谢！

标签： c# jquery ajax asp.net-mvc-5

【解决方案1】：

我发现了一些问题。

您使用Html.BeginForm 的代码不正确。应该是

@using(Html.BeginForm())
{ 
   @Html.TextBoxFor(x => x.test1, new { style = "width:30px" })
   <button id="hello">Send</button>
}
<div id="result1"></div>

这将生成正确的表单标签。

现在对于 javascript 部分，您需要防止默认的表单提交行为，因为您正在进行 ajax 调用。为此，您可以使用 jQuery preventDefault 方法。

$(document).ready(function () {
    $('#hello').click(function (e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("HelloAjax", "Home")',
            data: $('form').serialize(),
            success: function (result) {
                $('#result1').html(result);
            } 
            ,error: function (a, b, c) {                     
                    alert("Error in server method-"+c);
            }

        });
    });
});

此外，您可能会考虑在脚本部分中添加页面级 jquery 事件处理程序（假设您有一个名为“脚本”的部分在加载 jQyery 后通过“RenderSection”调用在布局中调用。

所以在你的布局中

<script src="~/PathToJQueryOrAnyOtherLibraryWhichThePageLevelScriptUsesHere"></script>
@RenderSection("scripts", required: false)

在你个人看来，

@section scripts
{
  <script>
  //console.log("This will be executed only after jQuery is loaded
  $(function(){
       //your code goes here
  });
  </script>
}

【讨论】：