提交 MVC 后在同一视图中显示结果

Posted 2023-02-26

【中文标题】提交 MVC 后在同一视图中显示结果

【英文标题】：Show result in same view after submit MVC

【发布时间】：2015-04-14 10:20:41

【问题描述】：

我有一个包含两个字段的表单，它们会将值传递给存储过程。存储过程将返回 0 或 1。

如果为 0，则用户没有资格查看数据。如果为 1，他是。然后我想在我提交的同一页面中显示详细信息。我正在使用 MVC 4 剃须刀。

请给出一些想法如何实现这一点。我是 MVC 新手。

【问题讨论】：

根据您的结果，您可以渲染部分视图。如果 sp 返回 1 渲染部分视图，否则不执行任何操作。

为什么不用Ajax调用？提交后，您必须重新加载页面！使用简单的“按钮”和“onclick()”，您可以使用“javascript”将结果附加到页面中

【参考方案1】：

您可以使用 javascript ajax 发布您的发件人。使用它，您可以通过 ajax 获取数据而无需刷新页面，然后您可以使用您的 ajax 结果来显示数据。

html 代码

<form id="MyForm"  method="post">
<input type="text" name="value1"/>
<input type="text" name="value2"/>
<input type="submit" name="Submit" value="Submit" />
</form>

控制器代码

public class HomeController : Controller

    [HttpPost]
    public ActionResult MyAction(MyViewModel model)
    
        var result = ResultOfStoredPrcedure();
        return Content(result);
    

javascript 代码

<script >

 $(document).ready(function () 

    $('#MyForm').submit(function (e) 

        var formData = new FormData(this);

        $.ajax(
            url: '@Url.Action("MyAction", "Home")',
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: formData,
            contentType: false,
            processData: false,
            success: function (result) 
             // here in result you will get your data
            ,
            error: function (result) 

            
        );
        e.preventDefault();
    );
);
</script>

【参考方案2】：

如果您愿意，您可以使用 MVCs Ajax Helper，并使用 Ajax.BeginForm()，或者使用 javascript 和标准表单来发布。不管选择什么，在你的 Action 中只返回一个 View。

如果您使用 Ajax.BeginForm()，您可以通过它的 ID 指定要更新的元素，并且通过返回 View，与返回 Content 相比，您可以更好地控制返回的内容。

@using (Ajax.BeginForm("MyActionHome", "Home", new AjaxOptions HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "resultArea"))

    <input type="submit" name="Submit" value="Submit" /><


<div id="resultArea">
</div>   

此表单允许您指定操作、控制器、选项以及是否要发送其他参数。我们还指定了要更新的 TargetId，在本例中为“resultArea”。

如果您需要一些客户端代码来执行，您也可以使用 OnComplete 选项并提供一个 JavaScript 函数。

[HttpPost]
public ActionResult PurchaseUnit()

    return View("_ResultPartial",);

这里我们有一个返回 PartialView 的基本控制器。然后，该 Partial 将插入到指定的 Id 中，并将替换，如我们的选项所定义的那样

【参考方案3】：

如果我理解正确，您需要使用 Ajax.Beginform（或 Ajax.Action）。 所以，看看这个答案，我希望它对你有帮助 https://***.com/a/5410121/2115584