ASP.NET MVC局部視圖問題提交表單時

Question

我想顯示一個主內的局部視圖（索引）查看：

步驟：

1. 用戶從指數選擇一個下拉項視圖。
   
   • 這顯示具有搜索窗體的部分視圖。
2. 用戶填寫搜索表單，然後單擊提交按鈕。
3. 如果搜索表單有效，則會顯示一個新頁面（結果視圖）。
4. 否則，搜索表單局部視圖應重新顯示裏面的主視圖

我在與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); 
     } 
    } 
} 

型號

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

Index.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上（即我已經添加到視圖格）。

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> 

從您的部分視圖中刪除表單標籤只需調用ajax調用方法進行搜索。 可能是最容易處理此問題的方法是使用MVC不顯眼的ajax。

Answer 2

我會說使用內聯Ajax提交此表單。

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