Showing list to the view - asp.net-mvc-3

I have retrieved a list of products from the database, from model to controller. Now, I want to display it in the view when the button is clicked. I don't know which HTML element to use to show the list and how do I pass it to the view?

In your controller, you can pass the Model to the View by returning your model like:
return View(model);
Then in your View specify your model at the top of your file:
#model [Model here]
Then you could loop through your objects to display them on the page like so:
<ul>
#foreach(var product from Model.Products){
<li>#product.Name</li>
}
</ul>

Related

Rendering a partial list view and partial form within a details view

So I am tryng to create a comment form and a comment view within a post view.
Basically i have a post view from my blog, and i want to show a comments form and a comment section on each.
I have the views all prepared, and so far i have my form displayed at the bottom of my post view.
What i am looking to do is add my comments view to the post view above the form.
Comment Controller
// GET: /Comments/_AllComments - Partial view
public ViewResult _AllComments(int postid)
{
TempData["PostId"] = postid;
return View("_AllComments");
}
Post Detail View
#model MyProject.Models.Post
//MARKUP OMITTED
//Comments Partial View
#Html.Partial("_AllComments", new Invest.Models.Comment())
//Comments Form Partial View
#Html.Partial("_Comment_Form", new Invest.Models.Comment())
Partial View - All Comments
#model IEnumerable<MyProject.Models.Comment>
//MARKUP OMITTED
The error that i get is:
The model item passed into the dictionary is of type 'MyProject.Models.Comment', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[MyProject.Models.Comment]'.
Could someone tell me how I get round this?. I have tried changing the partial to Html.RenderPartial which didnt work either.
If you look closely you will see that your partial view needs a collection and you are passing a single object.
To solve this you can change the line with partial to like below:
//Comments Partial View
#Html.Partial("_AllComments", new List<Invest.Models.Comment>(){ new Invest.Models.Comment()})
Note: Using Html.Partial won't make a call to Action _AllComments, if you want to use the result of that action (the partial view), Html.Action or Html.RenderAction are used to do that.

MVC Parital view ID to render another partival view

My MVC page has a Parent view that show the Parish page. Every Parish has multiple Churches and Every Church has its Own mass times. Parish page has Churches as Partial View but I want to use Church ID to render another Parital view of Mass times (Stored Procidure). How can use the ID of a partial view and create anothe partial view. I had been banging my head but unable to get this resolved.
render the Partial view in Side the Div tag. Then use the div ID and Clone the div to create a another partial view.
See below code sample.
<Div id="SomeId">
//Render your partial view here.
</Div>
Clone the Div and create as many partial view u need.
I finally got it working... I was now able to get the Partial view work...
Stored Procedure inside the controller:
public ActionResult Timing(int id)
{
var massTimings = db.masTimings(id);
return PartialView(massTimings);
}
My View inside Locations Partial View:
#Html.Action("Timing",new {id = item.LocationID})

Using model data in a form in a partial view

I have the following code in a partial view:
#model MyOrganization.MyApp.Models.ProductListing
#using (Ajax.BeginForm("TagProduct", new AjaxOptions() { UpdateTargetId = "FormContainer" , OnSuccess = "$.validator.unobtrusive.parse('form');" }))
{
<p>
#Html.LabelFor(m => m.ModelNumber):
#Html.EditorFor(m => m.ModelNumber)
Tag Product with This Model Number
#(Html.ValidationMessageFor(m => m.ModelNumber))
</p>
}
The viewmodel that this partial view gets is instantiated and many of its properties are hydrated by the view that contains this partial view. However, when the submit is called here, the viewmodel that the controller gets has only the ModelNumber property hydrated. All the other properties are null as if a new instance is created by the partial view with only the property that was edited (ModelNumber) getting a value.
I know that the viewmodel instance passed to the partial view has all the other property values, because if I add an #Html.EditorFor(m => m.SerialNumber) I can see the SerialNumber value that the containing view had rendered in the browser's textbox and I also get it back in the controller when the form is submitted. However, I don't want an editor for the SerialNumber property on the form - I just want it back in the controller when it is submitted.
How can I can I get the entire model back to the controller as it was passed in to the partial view with only the changes that the partial view made?
When it posts the form, it DOES create a new copy of the model with whatever values you posted to it. If you need the other values, put #Html.HiddenFor the other elements you need posted.

Populate a partialview

I feel stupid asking this but I cant seem to get a partial view rendering in a page.
I have created a partial view that im trying to load into my index page. I have called my pv _BusinessDetails basically its a view that returns some customer data.
My pv looks like
#model MyMVC.Models.BusinessModel
<div class="grid">
<div class="grid-header">
<div class="gh-l"></div>
<div class="gh-m">Business Details</div>
<div class="gh-r"></div>
</div>
<div class="grid-row">
<label class="labelBold">Busines Name</label>
<label>#Model.BusinesName</label>
</div>
</div>
From my index page I am trying to call the pv using
#Html.Partial("_BusinessDetails")
which fails so if I add
#Html.Partial("_BusinessDetails",new MyMVC.Models.BusinessModel())
The partial view is loaded however with no data as the controller isn't been hit. In my controller I have tried
public ActionResult _BusinessDetails()
{
return PartialView("_BusinessDetails");
}
public PartialViewResult _BusinessDetails()
{
return PartialView("_BusinessDetails");
}
However neither of them are hit. What have I done wrong?
When rendering a partial view and passing a view model, that view model should already be populated. No controllers/action methods are invoked when using #Html.Partial().
Since you are using this strongly-typed partial view on your home page, consider building its view model in your HomeController's Index() method. Is your index page strongly-typed as well? If so, you can add your partial view's view model as a property of your index page's view model, and pass that when calling #Html.Partial().
On your index page, it would look something like:
#model MyMVC.Models.IndexViewModel
<!-- some HTML here -->
#Html.RenderPartial("_BusinessDetails", Model.BusinessModel)
If your index page is not strongly-typed, you can use the ViewBag object or you can strongly-type it to MyMVC.Models.BusinessModel and use #Html.RenderPartial("_BusinessDetails", Model) (which, while simple, could cause confusion).
Rachel Appel has a nice blog post, as does Mike Brind, if you would like more information.
It's tricky. I've had success with using a model on the main view as a container object:
class MainPageModel {
public BusinessDetailModel BusinessDetails { get; set; }
// ...
}
and then just passing the whole model like #Html.Partial("_BusinessDetails", Model) to my partial views.
When you wrote this,
#Html.Partial("_BusinessDetails",new MyMVC.Models.BusinessModel())
The data is not loaded as your model is empty, so before passing model BusinessModel,fill it before.

MVC 3 Rendering 2-Level Menu as Partial View

I would like to implement a 2-level parent/child menu in my MVC 3 site such as
Company
- Background
- Contact
I have implemented a single, parent level menu as a PartialView like so ...
<div id="menu" class="block">
<ul id="menuItems">
foreach (var item in Model)
{
<li id="#item.Id">#Html.ActionLink(item.Name, item.Action,item.Controller)</li>
}
</ul>
</div>
and then included it on my MasterPage ...
#{Html.RenderAction("MainMenu", "Menu");}
The problem is that I would like to render a second child-menu based on the menu item selected at the parent level. This involves passing the Id of the parent into the controller action that returns the menu model. I'm not sure how I can pass this parent Id into the controller action. Can anyone provide any insights into this? I'm using MVC3 & Razor.
You may want to check out MvcSiteMapProvider which handles multilevel menu and sitemaps.
Looks like you're using Razor and while I'm not super familiar with that I'll take a shot at it. Basically you're going to pass a new object that has a single property of "id" to the MainMenu view. That will create another menu. Your MainMenu action should take an optional parameter of id.
public ActionResult MainMenu(int? id = null) {
...
}
Here is what your new list item would look like.
<li id="#item.Id">#Html.ActionLink(item.Name, item.Action,item.Controller)
#{Html.RenderAction("MainMenu", "Menu", new { id = item.Id });}
</li>

Resources