Partial MVC Views Release

Question

I am very new to MVC and I am trying to figure out if there is a better way to do this. I have a text box for a user that can perform a search, and then based on this search, I show some results below the specified search box. I try to avoid so much code logic in my opinion and would like to know if there is a better way to handle this. Here is my existing code where, based on the value of "Model.Results", it will return one of 3 partial views or a button if the rest of my logic passes:

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

I would like to put this inside the controller so that it simply returns the view that should be displayed, and then just display that view on the page. After I made a few hooks, I thought of using Ajax.BeginForm with the InsertionMode setting so that InsertAfter would do the trick:

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

Then My GenericSearch Action uses a switch to decide which partial view returns:

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

But when I tried it, it places a partial view on a new page.

here is one of my partial views (they are all basically identical to this)

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

Any help would be appreciated!

Edit Only a useful hint, if someone makes the same stupid mistake as me, make sure your packages are called before your scripts.

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

I added to these last 2 lines when it was mentioned that they use them, but they were higher than my packages ... and therefore ajax did not work because of this. Thanks for helping everyone, now everything is fine! --Joseph

Answer 1

I would like to put this inside the controller so that it just returns a view

Seems pretty straightforward:

ViewModel:

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

Controller action

 public ActionResult DoLogic() { //var Results = ?? as The ENum switch(Results) { PrefixSearch.SearchResults.CustomerFound: model.PageToRender = "_CustomerPrefixInfo"; // etc etc } return View(model); } 

View:

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

Although I would probably beautify Enum:

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

And then there is no switch statement, you just get the value of the attribute attribute of the enum value .

Answer 2

Make sure you include jQuery and jquery.unobtrusive-ajax.js (or jquery.unobtrusive-ajax.min.js ) at the top of the page on which you want to execute Ajax.

Like this:

 <script src="~/scripts/jquery-1.xxjs" /> <script src="~/scripts/jquery.unobtrusive-ajax.js" /> ... The rest of your page down here ... 

This allows you to partially handle the postback on the page, rather than redirecting you every time.

If you do not have jQuery files or do not know how to include them; read here: http://www.c-sharpcorner.com/UploadFile/4fcb5a/update-a-div-and-partial-view-using-ajax-beginform-on-form-s/ - this is very useful.

Ensure that Unobtrusive JS is enabled, also in the web.config file. They look like this: <appsettings> node:

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

If you use validation - that I doubt that you are looking for a search; but stay with me - you can also include jquery.validate.js and jquery.validate.unobtrusive.js . This can allow client-side validation (where possible), making the UX much smoother.

NOTE. There are other ways to execute an Ajax request; for example, creating it in your own JS script - this example is easiest to use the already available and very favorite library :)

Hope this helps!

EDIT
switch , on which a partial view for return can be performed exclusively from within your controller. You can remove the logic from the page view.

Then Ajax will take care of replacing the contents of the div identifier provided to the Ajax.BeginForm .

You can either completely replace the search form - using your identifier, or, all the better, put an empty empty <div> container on the page, ready to display the results in:

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

Then Ajax will return a partial view and place the content in your searchResults div.

EDIT 2

I noticed in your Ajax.BeginForm AjaxOptions object that you are missing HttpMethod = "POST" .

AjaxOptions should look something like this:

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