【问题标题】：.NET MVC Razorview form not showing using Ajax.NET MVC Razorview 表单未显示使用 Ajax
【发布时间】：2017-12-21 22:37:17
【问题描述】：

主视图：

使用图标对 ApplicationController 中的 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>
}

【问题讨论】：

因为你没有对从 AddAppForm() 方法返回的视图做任何事情。您需要在成功回调中更新 DOM - $(someElement).html(result)（您可以删除无意义的 contentType: 'application/html; charset=utf-8', 选项）
您的警报中有结果，它显示了吗？如果是这样，则将警报替换为@StephenMuecke 描述的内容。
同时尝试返回部分视图结果，否则您的模板也会返回。
谢谢！是的，我在结果中看到了整个模板......将返回值扔进了一个 div 并出现了表单。出于某种原因，我假设如果我不返回服务器端数据，它会呈现它...#rookie

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

【解决方案1】：

您的 Ajax 调用正常

但是你需要在屏幕上渲染一些元素中接收到的数据：

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


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

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

在JQuery .html() Documentation上查看更多信息

【讨论】：

是的，这就是我所做的……而且我的主目录中有其他 div……如果我不需要查看它们，我必须隐藏它们。我想知道是否有更好的方法来解决这个问题......
如果要一次隐藏多个元素，可以在每个元素上放置相同的class，然后全部隐藏：$('.classToHide').hide()

【解决方案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")) 的操作名称

和你的 Ajax url 调用一个动作名称 AddAppForm

你必须创建一个类似的动作名称

public ActionResult saveApps()
{

    return View();
}

让您的@using (Html.BeginForm("saveApps", "Application")) 正常工作。

【讨论】：