C# 提交表单时ASP.NET MVC部分视图问题

我试图在主（索引）视图中显示局部视图：

步骤：

用户从索引视图中选择下拉项

• 这将显示具有搜索表单的局部视图

用户填写搜索表单，然后单击提交按钮

如果搜索表单有效，将显示新页面（结果视图）

否则，应在主视图中重新显示搜索表单部分视图，并显示错误

我对数字4有一个问题，因为当搜索表单提交时，它只在新窗口中显示部分视图。我想显示整个页面：索引视图+带错误的局部视图

建议？这就是我所拥有的：

形象

控制器

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

模型

---

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

更改index.html，然后

1-如果表单有效，则替换整个html或主容器（我添加到视图中的div）

2-否则只需替换局部视图

@{ 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>

@{ViewBag.Title=“应用程序选择”；}
应用程序选择
@Label（“选择类型：”）
@DropDownListFor（x=>x.Platform，Model.Options）
//这就是局部视图的所在

从局部视图中删除表单标记，只需调用ajax调用方法进行搜索。

---

处理此问题最简单的方法可能是使用MVC unobtrusive ajax

我想使用内联ajax提交此表单

@using (Html.BeginForm("Search", "App"))
{
   @Html.Label("App Name:")
   @Html.TextBoxFor(x => x.IOSAppName)

   <input id="btnIOS" type="submit" value="Search IOS App" />
}

@使用（Html.BeginForm（“搜索”、“应用”））
{
@标签（“应用程序名称：”）
@Html.TextBoxFor（x=>x.IOSAppName）
}

将上面的给定代码更改为下面的代码

@using (

Ajax.BeginForm(
    "Form", "App",
    new AjaxOptions()
    {
        UpdateTargetId = "App",
        HttpMethod = "Post"
    }
   ) 
 )

 {   
    <div class="editor-label">
        @Html.Label("App Name:")
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(x => x.IOSAppName)
    </div>
    <input id="btnIOS" type="submit" value="Search IOS App" />

 }

 //in controller change the parameter of the given method from string type to model object which will be posted by ajax form.
  public ActionResult Form(AppModel appModel)
  {
    if (appModel.type == "IOS")
        return PartialView("_IOSApp", new AppModel());
    else
        return PartialView("_AndroidApp", new AppModel());
  }

使用( Ajax.BeginForm( “表格”、“应用程序”， 新的AjaxOptions（） { UpdateTargetId=“App”， HttpMethod=“Post” } ) ) { @标签（“应用程序名称：”） @Html.TextBoxFor（x=>x.IOSAppName） } //在控制器中，将给定方法的参数从字符串类型更改为将由ajax表单发布的模型对象。 公共行动结果表（AppModel AppModel） { 如果（appModel.type==“IOS”） 返回PartialView（“_IOSApp”，new AppModel（））； 其他的 返回PartialView（“_AndroidApp”，new AppModel（））； }

---

此ajax仅在下拉选择更改时执行（它仅用于显示表单）-我在这方面没有问题。我想要的是：单击Submit按钮->调用“Search”操作方法。在这里，如何显示包含错误的部分视图？添加一个div，用于在部分视图或主视图中显示错误消息，并在Ajax调用中出现错误时显示。此Ajax将转到/App/Form，我需要在模型无效时管理/App/Search中的返回。为什么不使用@Ajax.BeginForm（…）这就是我正在使用的-看看我的_IOSAPP.cshtml。但是当表单提交时，它会转到搜索操作方法，如果模型无效，它只显示部分视图。我想要的是整个页面（索引视图+带错误的部分视图），我的意思是使用Ajax.BeginForm而不是Html.BeginForm，因此在提交时，转到搜索操作，如果有效，返回带有搜索结果更新到页面的部分视图，如果无效，返回带有错误消息更新到页面的部分视图。sumbit请求是一个Ajax post请求

$(document).ready(function () {

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

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

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

});

@{ 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>

@using (Html.BeginForm("Search", "App"))
{
   @Html.Label("App Name:")
   @Html.TextBoxFor(x => x.IOSAppName)

   <input id="btnIOS" type="submit" value="Search IOS App" />
}

@using (

Ajax.BeginForm(
    "Form", "App",
    new AjaxOptions()
    {
        UpdateTargetId = "App",
        HttpMethod = "Post"
    }
   ) 
 )

 {   
    <div class="editor-label">
        @Html.Label("App Name:")
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(x => x.IOSAppName)
    </div>
    <input id="btnIOS" type="submit" value="Search IOS App" />

 }

 //in controller change the parameter of the given method from string type to model object which will be posted by ajax form.
  public ActionResult Form(AppModel appModel)
  {
    if (appModel.type == "IOS")
        return PartialView("_IOSApp", new AppModel());
    else
        return PartialView("_AndroidApp", new AppModel());
  }