MVC Partial Views issue

Question

Я очень новичок в MVC, и я пытаюсь выяснить, есть ли лучший способ сделать это. У меня есть текстовое поле для пользователя, которое может выполнить поиск, а затем на основе этого поиска я показываю некоторые результаты ниже указанного окна поиска. Я стараюсь избегать так много логики кода на мой взгляд и хотел бы знать, есть ли лучший способ справиться с этим. Вот мой существующий код, в котором на основе того, что значение «Model.Results» является он будет возвращать один из 3-й частичного вида или кнопку, если остальная часть моей логики проходит:

@section CustomerPrefixInfo 
{ 
    @if (Model.Results == PrefixSearch.SearchResults.CustomerFound) 
    { 
     @Html.Partial("_CustomerPrefixInfo") 
    } 
    @if (Model.Results == PrefixSearch.SearchResults.PrefixResultsFound) 
    { 
     @Html.Partial("_PrefixResults") 
    } 
    @if (Model.Results == PrefixSearch.SearchResults.AnimalsFound) 
    { 
     @Html.Partial("_AnimalSearchResults") 
    } 
    @if (Model.Results == PrefixSearch.SearchResults.ValidNewPrefix) 
    { 
     using (Html.BeginForm("Index", "PrefixManagement", new { prefix = Model.AnimalPrefix.Prefix, dbPrefix = Model.AnimalPrefix.DbPrefix })) 
     { 
      <fieldset> 
       <input id="btnReservePrefix" type="submit" value="Reserve Prefix" /> 
      </fieldset> 
     } 
    } 
} 

Я хотел бы поставить это внутри контроллера, чтобы он просто возвращал представление, которое должно отображаться, а затем просто отображать это представление на странице. Aftering делать некоторые rearch я думал, используя Ajax.BeginForm с InsertionMode равного InsertAfter будет делать трюк:

@using (Ajax.BeginForm("GenericSearch", "Home", FormMethod.Post, new AjaxOptions { InsertionMode = InsertionMode.InsertAfter, UpdateTargetId = "searchResults" })) 
{ 
    <fieldset> 
     <input id="btnPrefixSearch" type="submit" value="Prefix Search/Validate"/> 
     @Html.EditorFor(model => model.Input) 
    </fieldset> 
    <div id="searchResults"> 

    </div> 
} 

Мое GenericSearch Действие затем использует переключатель решить, частичный вид вернуться:

public ActionResult GenericSearch(PrefixSearch prefixSearch) 
{ 
    //some database logic here to get the results 
    switch (prefixSearch.Results) 
    { 
     case PrefixSearch.SearchResults.CustomerFound: 
      return PartialView("_CustomerPrefixInfo", prefixSearch); 
     case PrefixSearch.SearchResults.PrefixResultsFound: 
      return PartialView("_PrefixResults", prefixSearch); 
     case PrefixSearch.SearchResults.AnimalsFound: 
      return PartialView("_AnimalSearchResults", prefixSearch); 
     default: 
      return null; 
    } 
} 

Но когда я это пробовал, он помещает частичный вид на новую страницу.

вот один из моих окон открывается частичный вид (все они в основном 3 идентичны этим)

@model MVC_Test_Project.Models.PrefixSearch 

@{ 
    ViewBag.Title = "PrefixResults"; 
} 

@{ 
    Layout = null; 
} 
<table class="table"> 
    <tr> 
     <th> 
      @Html.DisplayNameFor(model => model.PrefixResults[0].Prefix) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.PrefixResults[0].CustomerCount) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.PrefixResults[0].Link) 
     </th> 
    </tr> 

@foreach (var item in Model.PrefixResults) 
{ 
    <tr> 
     <td> 
      @Html.DisplayFor(modelItem => item.Prefix) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.CustomerCount) 
     </td> 
     <td> 
      <a href="@item.Link">edit</a>    
     </td> 
    </tr> 
} 
</table> 

Любая помощь будет оценен по достоинству!

Редактировать Просто полезный намек на случай, если кто-то совершит ту же самую глупую ошибку, что и я, убедитесь, что ваши связки вызываются перед вашими скриптами.

@Styles.Render("~/Content/css") 
@Scripts.Render("~/bundles/modernizr") 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryval") 
@Scripts.Render("~/bundles/bootstrap") 
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script> 
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script> 

Я добавил в эти последние 2 строчки, когда было упомянуто, использовать те, но они были выше моих пучках .... и, таким образом Ajax не работает из-за него. Спасибо за помощь всем, теперь все хорошо! --Joseph

Answer 1

Я хотел бы поместить это внутри контроллера, так что он просто возвращает вид

кажется довольно прямо вперед:

ViewModel:

public class MyModel 
{ 
    public string PageToRender { get; set; } 
} 

Действие контроллера

public ActionResult DoLogic() 
{ 
    //var Results = ?? as The ENum 

    switch(Results) 
    { 
    PrefixSearch.SearchResults.CustomerFound: 
     model.PageToRender = "_CustomerPrefixInfo"; 
    // etc etc 
    }  

    return View(model); 
} 

Вид:

@{if (!string.IsNullOrEmpty(model.PageToRender)) 
    Html.RenderPartial(model.PageToRender);} 

Хотя я, вероятно, украсить Enum:

public enum SearchResults 
{ 
    [Display(Name="_CustomerPrefixInfo")] 
    CustomerFound 
} 

И тогда нет переключателя заявление, вы просто grab the enum value display attribute's name value.

Answer 2

Убедитесь, что вы в том числе JQuery и jquery.unobtrusive-ajax.js (или jquery.unobtrusive-ajax.min.js) в верхней части страницы, которую нужно выполнить Ajax на.

Как это:

<script src="~/scripts/jquery-1.x.x.js" /> 
<script src="~/scripts/jquery.unobtrusive-ajax.js" /> 

... 
The rest of your page down here 
... 

Это позволяет постбэк Частичное, чтобы быть оказаны на странице, а не повторно направлять вас каждый раз.

Если у вас нет файлов jQuery или вы не знаете, как их включить; читайте здесь: http://www.c-sharpcorner.com/UploadFile/4fcb5a/update-a-div-and-partial-view-using-ajax-beginform-on-form-s/ - это очень полезно.

Убедитесь, что в вашем файле web.config включен Unobtrusive JS. Они выглядят, как это в <appsettings> узле:

<add key="ClientValidationEnabled" value="true"/> 
<add key="UnobtrusiveJavaScriptEnabled" value="true"/> 

Если вы используете проверки - что я сомневаюсь, вы для поиска; но оставайтесь со мной - вы также можете включить jquery.validate.js и jquery.validate.unobtrusive.js. Это может позволить проверке на стороне клиента (где это возможно), что делает UX более гладким.

ПРИМЕЧАНИЕ: Там : другие способы выполнения запроса Ajax; например, создание его в вашем собственном сценарии JS - этот пример является самым простым использованием уже доступной и очень любимой библиотеки :)

Надеюсь, это поможет!

EDIT
The switch, на котором Частичный вид на возвращение может быть сделано только внутри вашего контроллера. Вы можете удалить логику из окна просмотра страницы.

Ajax затем позаботится о замене содержимого идентификатора div, предоставленного помощнику Ajax.BeginForm.

Вы можете либо заменить форму поиска полностью - с помощью его идентификатора, или, еще лучше - поместить пустой <div> контейнер внутри страницы, готовый для отображения результатов в:

<div id="searchResults"></div> 

Аякса будет потом верните частичный вид и поместите содержимое внутри своего searchResults div.

EDIT 2

я заметил в ваших Ajax.BeginForm «ы AjaxOptions объекта вам не хватает HttpMethod = "POST".

AjaxOptions должен выглядеть примерно так:

new AjaxOptions { 
      HttpMethod = "POST", 
      UpdateTargetId = "searchResults", 
      InsertionMode = InsertionMode.Replace 
}