.NET MVC Razorview 表单未使用 Ajax 显示

Question

主视图：

使用图标对应用程序控制器中的 AddAppForm 操作进行 ajax 调用。看来我的 ajax 调用成功了..但仍然看不到表格...思潮？看起来很简单...但。。。

...
...
<div id="btn_add_app" class="glyphicon glyphicon-plus btn_add_app" aria-hidden="true" style="color:forestgreen; cursor:pointer"></div>
...
...
$('.btn_add_app').click(function () {
$.ajax({
url: '/Application/AddAppForm',
contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'html',
success: function (result) {
alert(result);
}
});
});

应用控制器： 返回表单...

[HttpGet]
// empty form
public ActionResult AddAppForm()
{
Application app = new Application();
app.name = "new name";
return View(app);
}

视图：

@model Project.Models.Application    
@{ 
ViewBag.Title = "Add Application";
}
<h2>Add Application</h2>
@using (Html.BeginForm("saveApps", "Application"))
{
<div>
<div class="form-group">
@Html.LabelFor(a => a.name)
@Html.TextBoxFor(a => a.name)
</div>
<div class="form-group">
@Html.LabelFor(a => a.description)
@Html.TextBoxFor(a => a.description)
</div>
<div class="form-group">
@Html.LabelFor(a => a.HIM)
@Html.TextBoxFor(a => a.HIM)
</div>
<button type="submit" class="btn btn-primary">Save</button>
</div>
}

Answer 1

您的 Ajax 调用正在工作

但是您需要在屏幕上呈现某些元素中接收的数据：

<div id="renderDiv"></div>

[...]
success: function(data){
$("#renderDiv").html(data);
}

您的整个视图都在data变量内，因此您需要渲染

查看有关 JQuery .html() 文档的更多信息

Answer 2

尝试更改此设置：

从

$('.btn_add_app').click(function () {

自

$('#btn_add_app').click(function () {

.符号表示它的称呼是class，#意味着它的称呼是id这是两者之间的区别。

和您的网址：

从：

url: '/Application/AddAppForm',

自

url: "@Url.Action("AddAppForm", "Application")",

您的视图与 ajax 调用没有任何关系，因为它调用名为saveApps@using 的操作名称(Html.BeginForm("saveApps"， "Application"))

以及调用操作名称AddAppForm的 Ajax URL

您必须创建一个操作名称，例如

public ActionResult saveApps()
{
return View();
}

让你的@using (Html.BeginForm("saveApps", "Application"))发挥作用。