Question

你好我用谷歌搜索找到我的问题的解决方案，每个链接带我到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);
            }

        });
    });
});

Model（ModelVariables.cs）：

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

}

Controller（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>    
}

所以继续复制/粘贴代码来运行，当你点击按钮时，你会注意到你没有得到任何东西，用户输入文字，奇怪......

Answer 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事件处理程序（假设您有一个名为＆＃34的部分;脚本＆＃34;在布局中使用＆＃34; RenderSection＆＃34调用它;加载jQyery后调用。

所以在你的布局中

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

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

1 个答案: