mvc 4 reusable controls in one page - asp.net-mvc

I am new with MVC framework. When I was using Web form, the user control can be assigned parameter in the Page and can be Generated unique ID in the Page. Even though you implemented the control more than one time in the same page.
In MVC framework, Partial View is the only way to implement reusable control. I got some problems below.
How to Implement same reusable control more than once in the same page with different parameters.

I know RenderPartialExtensions.RenderPartial can pass different
ViewData, but if the partial view is implementing some
JavaScripts/Jquery, it would generate issue with Id in the same page
You can differentiate that id within passed models . you can put for example some unique member for that model and use inside partial view :
<p id="element#(Model.unique.ToString()) ></p>
Or avoid id selection inside jscript at all. for example use class selectors

Related

.Net MVC 4 View Engine WebForm

This is a quite interesting question, in my opinion.
I have a strongly typed view using the WebForm view Engine, I don't know if changing to razor would solve my problem.
PROBLEM:
I have one view with a list of cars, so of type IList <Car>.
And I have a button "Create a new Car" that popups, the popup is a form that is hidded and you call a jQuery UI command $('formName').dialog() to popup it, this form has the attributes of the possible new car, so probably a new view with a strongly typed Car. After fill in the form the database should be populated with the new car, and the list of cars should be refreshed using Ajax.
The main problem is that I can't use HTML Helpers to IList <Car> and for Car at the same time.
Briefly: What is the strongly type for that view ? Is it possible to define two views and the other one call using pop-up? Changing it to Razor would solve my problem?
Best regards,
Tito Morais
Don't mix the views for listing the cars and creating a new car together.
For instance, you can make a popup that dynamically loads a "_CreateCar" partial view, using jQuery dialog or similar component. Then when the partial view is completed, reload the list view using another Ajax call.
Maybe not so much an elegant solution is to create a complex view model like:
class ListAndCreate
{
public IList<Car> AllCars {get;set;}
public Car NewCar {get;set;}
}
IMO this is correct since that one view is responsible for listing all cars and creating a new one. Now, I'm assuming that your NewCar has values coming from your controller or something, where you need to pass a model to your view.
The other approach, that #Jonas mentions is also correct and more unitized. You could create a partial view _CreateCar with type Car, render it with Jquery/Ajax to load it into a dialog/popup and have the form POST to a Create(Car c) method in your controller.

MVC Models for complex page

I'm working on an ASP.Net MVC project. My index page will be similar to facebook's which means that the user can write a message but also sees the messages of his/her friends and a list of his friends is shown too. That means that there are two outputs and one input.
How should my Models for this page look like? Is it a good idea to have one IndexModel containing a list of all messages (List), a list of all friends (List), and an InputMessage class?
Or should I write one Model for each of them and put them together within a ViewModel?
Thanks
Your best bet is actually to split out either the friends list, messages list or both into their own partial views. Then if you don't want to have one controller action generate data for them, you can create actions for each of them and use Html.RenderAction to show them.
http://msdn.microsoft.com/en-us/library/system.web.mvc.html.childactionextensions.renderaction.aspx
If I am correct then your webpage will have static(list of friends) as well as dynamic(list of messages) content. I would suggest you to have a strongly typed view with with your model containing all the static content including the list of friends e.g. IEnumerable.
For messages create partail view using jQuery-template feature. Define the template as on how to display the messages, bind the template with raw json data(which will basically contain your messages) and embed this partial view in you strongly typed view.
Partial views can be resused so tomorrow you can use the same view to show messages else where in application.
For more on how to design using jQuery template : https://github.com/nje/jquery-tmpl/wiki/List-of-jQuery-tmpl-articles-and-tutorials
Friends and Messages are two different concerns so they got to be in different ActionResults, no matter how you plan to display them later on (using templating or something else)

ASP.Net MVC reusable form as RenderAction or RenderPartial

I'm looking for a best practice for embedding a form on multiple pages as a partial view.
I have a contact form I'm looking to embed on multiple pages on a site. Usually, the form would be on a contact page and the contact model could be the model for the view and use data annotations for validation. However, the view is already strongly typed.
How can I create a reusable form in a partial view and embed it on the page? I'm using N2 on the site, so the pages have to already have a strongly-typed model, but I would be open to extending those objects.
Personally, I recommend using for Html.RenderAction() for cross-cutting concerns such as these.
The handler for your contact form is going to need to exist independently of the page your are currently viewing so you are left with 3 options:
Manually add it to the response of
the current action
Manually add it to the response of
the current controller by way of a
base controller that modifies the
ViewState or ViewModel
Call the RenderAction()
HtmlHelper inside of the current view
Of these 3 options, while the third is technically more costly than 1 and 2 (because it initiates a brand new request), it is also the most maintanaible solution. By calling RenderAction() you have the advantage of being able to completely isolate your contact form from the rest of the view and thus you won't have to worry about hacking it into the current controller responses.
Use RenderPartial if data model for partial view is already in main view's model, in other case use RenderAction (then the action of the partial view will create its view model itself).

Populating the model for a shared view, embedding a shared view within another view

I'm trying to embed a small view snippet that steps through a model fragment that works fine when I embed it in a single controller and pass it to a view like so;
Controller:
return View(_entities.formTemplate.ToList());
View:
http://www.pastie.org/666366
The thing is that I want to be able to embed this particular select box in more than just this single action / view, from the googling I've been doing this appears that it should go into a shared view, but I'm not clear then on how I could populate the model within that view from the controller? (or maybe I'm completely missing the purpose for shared views?)
In the other MVC framework I'm accustomed to working with there is the concept of a filter where you can call code before or after any action and mod the model as it passes the controller and goes to the view, is such a thing possible in .net mvc?
Any assistance appreciated.
You'll want to use the HtmlHelper method DropDownList() in order to create a input:
<%= Html.DropDownList("id", new SelectList(formBuilder, "ID", "Name")) %>
You probably want to use a ViewUserControl here.
You have a couple of options if you go that route. If it's model data that is easily available, recreate it at the call site of your RenderPartial like so:
<%=Html.RenderPartial("ViewName", new ModelData())%>
If it's data that is dependent on the current model data, then you'll need to pass that data somehow to your partial view.
ASP.Net MVC also has the concept of before/after controller actions. You decorate your controller method with an Attribute that derives from ActionFilterAttribute. In there, you have access to OnActionExecuting and OnActionExecuted.

Providing data to Menu in my ASP.NET MVC Master Page

We are beginning the process of moving from Web Forms to MVC for all of our new applications. I am working on porting our Master Page over and am trying to satisfy the requirements that we need a single master page to be used by all applications. The primary navigation for the application needs to be in a menu within the master page. Accomplishing this was easy, the hard part is that each application may need to determine what to display in the menu using a unique set of rules. Some apps can simply say, here's the menu structure to use via something like a SiteMap. Others need to determine what is displayed in the menu based on what roles the user has, this can also be handled easily with a SiteMap. The situation that I'm struggling with is that some apps need to generate the menus based on the roles the user has, but also on the data on which they are working. i.e. The same user may have different option in the menu for a page if they are working on object 'foo' than they do if working on object 'bar'.
What I've done at this point, is I've created an HtmlHelper that is called by the master page view and takes a list of objects of a custom type and returns an unordered list that is styled by a jQuery plugin to display the menu. The list of objects the helper method takes are passed to the view using the ViewData dictionary. Currently, the value of this ViewData node is set within the constructor of each controller. This allows each page, and potentially each method, to set a different menu without having to set the value in each action method, unless its needed. I have also created a class that parses a SiteMap and returns the list of items needed to build the menu. This class is what I'm using to set the ViewData value in the controller. The idea being that if an application needed more control of how the menu data was generated, they could create their own class to generate the data as long as it returns a list of the correct type of objects.
This solution seems to work fine so far, it just doesn't 'feel' right for some reason. I'm hoping that I can either get some ideas of better way to do this or some reassurance that this is a valid approach to solving this problem.
If it is something that will be on every page, do something like this:
Create a base controller:
public class MyBaseController : Controller
Have this controller get the data it needs and send that data in the ViewData["menu"] to the View. Then have all your controllers inherit from this one:
public class HomeController : MyBaseController
In the Master Page, loop through your ViewData and create your menu.
(I did something like this for my sub-menu which displayed a list of categories.)
In the book I am reading (Pro ASP.NET MVC Framework by Apress) they use Html.RenderAction for the menu in the masterpage. I am a Asp.net MVC novice so maybe somebody else can give more info about this.
You can download the sourcecode at apress.com though so maybe that could help.

Resources