c# - 提交表单时的 ASP.NET MVC 部分 View 问题

Question

我正在尝试在主(索引) View 中显示部分 View :

步骤:

1. 用户从索引 View 中选择一个下拉项。
   
   • 这会显示一个包含搜索表单的分部 View 。
2. 用户填写搜索表单，然后点击“提交”按钮。
3. 如果搜索表单有效，则会显示一个新页面(结果 View )。
4. 否则，搜索表单部分 View 应该在主视图中重新显示错误

我遇到了第 4 个问题，因为当提交搜索表单时，它只在新窗口中显示
部分 View 。我想显示整个页面:索引 View + 有错误的部分 View 。

建议？这是我的:

图片

Controller

public class AppController : Controller
{
    public ActionResult Index()
    {
        return View(new AppModel());
    }

    public ActionResult Form(string type)
    {
        if (type == "IOS")
            return PartialView("_IOSApp", new AppModel());
        else
            return PartialView("_AndroidApp", new AppModel());
    }

    public ActionResult Search(AppModel appModel)
    {
        if (ModelState.IsValid)
        {
            return View("Result");
        }
        else // This is where I need help
        {
            if (appModel.Platform == "IOS")
                return PartialView("_IOSApp", appModel);
            else
                return PartialView("_AndroidApp", appModel);
        }
    }
}

模型

public class AppModel
{
    public string Platform { get; set; }
    [Required]
    public string IOSAppName { get; set; }
    [Required]
    public string AndroidAppName { get; set; }        
    public List<SelectListItem> Options { get; set; }

    public AppModel()
    {
        Initialize();
    }

    public void Initialize()
    {
        Options = new List<SelectListItem>();

        Options.Add(new SelectListItem { Text = "IOS", Value = "I" });
        Options.Add(new SelectListItem { Text = "Android", Value = "A"});
    }
}

索引.cshtml

@{ ViewBag.Title = "App Selection"; }

<h2>App Selection</h2>

@Html.Label("Select Type:")
@Html.DropDownListFor(x => x.Platform, Model.Options)

<div id="AppForm"></div> // This is where the Partial View goes

_IOSApp.cshtml

@using (Html.BeginForm("Search", "App"))
{
    @Html.Label("App Name:")
    @Html.TextBoxFor(x => x.IOSAppName)
    <input id="btnIOS" type="submit" value="Search IOS App" />
}

AppSearch.js

$(document).ready(function () {

$("#Platform").change(function () {

    value = $("#Platform :selected").text();

    $.ajax({
        url: "/App/Form",
        data: { "type": value },
        success: function (data) {
            $("#AppForm").html(data);
        }
    })
});

});

Answer 1

还需要通过ajax调用搜索方法。

修改index.html然后

1- 如果表单有效，请替换整个 html 或 mainContainer(我添加到 View 中的 div)。

2- 否则只替换部分 View 。

@{ ViewBag.Title = "App Selection"; }
<div id="mainContainer">
<h2>App Selection</h2>

@Html.Label("Select Type:")
@Html.DropDownListFor(x => x.Platform, Model.Options)

<div id="AppForm"></div> // This is where the Partial View goes
</div>

从局部 View 中删除表单标签只需调用 ajax 调用方法进行搜索。处理此问题的最简单方法可能是使用 MVC unobtrusive ajax。