MVC3 show appropriate partial view based on selected item - asp.net-mvc-3

So i have View1 and in there I have:
<ul>
<li><a>First item</a></li>
<li><a>Second Item</a></li>
</ul>
//Some Partial View Placeholder
When a user click on First Item, I want the Partial View Placeholder to Load a FirstView, and when user clicks on Second Item, I want the Partial View to load a SecondView.
Each of Partial View's need save information in View1's model info.
How is best way to do this?

You could either load both partials into two divs on the page and use javascript to hook into any clicks on first and second item, and to change visibility of the relevant div.
Or if you don't want both partials loaded on the page at the same time, you could make your placeholder an empty div and use something like jQuery.Ajax. When first or second item is clicked, make an asynchronous call to the relevant partial view and inject the returned html directly into the div placeholder.

Related

How to get parent view from partial view

I have a partial view as part of the _Layout.cshtml, so that it gets rendered on multiple pages. Think of the partial view as a menu that gets displayed on every page on the website.
When one of these links in the menu of the partial view is clicked, I can only access/see in the Action Method that gets called the partial view, like it's name etc.
But what I really need to have is the View that the partial view was on when the item was clicked.
How can I get this?
You can use ParentActionContext
For example
var controller = ControllerContext.ParentActionViewContext.RouteData.Values["Controller"] as string;
var action = ControllerContext.ParentActionViewContext.RouteData.Values["Action"] as string;
Update
From the view this call should do what you need
#HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString()
#HttpContext.Current.Request.RequestContext.RouteData.Values["action"].ToString()

Hide the Partial view and show another partial view in mvc3

I have a hyperlink column in the grid. On clicking the link i have to hide the partialview(grid section) and have to show/load another partialview which is the detail section. Please provide solution
You could use javascript. With jQuery that will correspond to the .toggle() function or the .show()/.hide() functions. So basically you will subscribe to the click event of the link and inside this handler show and hide the respective sections. For this to work you should obviously place those partials inside placeholder divs so that you could show/hide the entire placeholder.
If in addition to showing the partial you need to fetch some fresh information from the server then you could use AJAX to request a controller action that will return the fresh data of the partial view that you will inject into the DOM at the correct placeholder location. In order to send an AJAX request in jQuery you could use the $.ajax() function or directly the .load() function.

Mvc Telerik Window does not post values of partial view

Good day,
I have the following scenario:
I have a Razor view with a "#using(Html.BeginForm(....))" statement at the top of the page. Inside the using statement I have a few textboxes, whose values get populated by the user, and a button.
At the click of that button, a telerik modal window (displaying a partial view of the same model as the initial view) pops up so that the user can populate some more fields. Inside the modal window there is a button that must submit the entire form, which it does, however after I debug my action, I notice that the model is missing the values which were entered in the popup (partial view).
My code for the telerik window resides inside the using statement and looks as follows:
Html.Telerik().Window()
.Name("AddEditScaleWindow")
.Title("Save Scale")
.Content(#<text>#Html.Partial("AddUpdateFeeScale")</text>)
.Buttons(e => e.Close())
.Height(250)
.Width(350)
.Modal(true)
.Draggable(true)
.Visible(false)
.Render();
I tried different methods of getting the window to post its values but to no avail.
If I view source, I can see that the window (partial view) is inside the form. If I do a network trace I can see that the values being posted are all values that were entered on the view, but none from the partial view.
Does anyone have any idea why the values inside the window don't get posted?
Thank you in advance.
Matei
You might need to check this because I am guessing, but many dialog renderers create their dom elements below document and outside of your Form element. If that is the case with Telerik, you will need to do a bit of work on the client to copy the values from the dialog back to your other form.

Unable to pass model into partial view inside layout pages

I have a layout page within that layout I have used a partial view, the partial view contains a menu feature that I have built, I split the menu into a partial view to ensure it is easy to maintain. The menu has been purposely placed in the layout because it is used across every page, however there are conditional elements in the menu whereby some options only appear on certain pages.
I have stumbled upon what will be an issue for me moving forward, the menu uses ajax calls to render partial views containing the content (reducing page loads) I was just working on a page which contains a company, the company contains a list of contacts, the menu option when clicked should display the list of contacts. I have already loaded the contact list under the company model, but! I can’t access it from my new partial view that should render the contact list because the menu is a partial view that is contained within the layout page and as such cannot accept a model, so I cannot pass a model into the partial view I am trying to load because the menu partial view sits in the layout page.
This is a sticky situation, I obviously could change the layout to render a new section to contain the menu so I can pass a new view model into it but then every single page I build needs to reference the menu (what a pest!) I must be missing something here (considering this is my first MVC3 application that is likely). Any suggestions?
Edit: I took this further on my own, in short my layout page will always be able to access the model of the page that consumes it, as such my partial view which contains the menu can also access that data. I wrote some conditional logic in my menu partial view that checks the page and then passes in data as required.
<div class="menu">
<ul>
<li><a href="#Url.Action("Create", "Contact")">New Contact </li>
<li>Contact List </li>
</ul>
#if (Request.Url.PathAndQuery.Contains("/Contact/Details/"))
{
<ul>
<li>#Html.ActionLink("New Activity", "Create", "Activity", new { companyid = 0, contactid = Model.contact.id }, null)</li>
</ul>
}
</div>
The above is a small sample of the menu partial view but contains one example where the menu is built for the contact/details page and is able to pass in the model.contact.id. It works in that my menu and my layout do not explicitly contain a model, but it does not feel very tidy.
If I'm understanding your question correctly, your issue is that you don't think your Partial View can have a model because you don't want your layout to have a model. So the question is how can you get a model into your layout without needing every single action to extend this base model type your layout would use.
1) Instead of using Html.Partial in your layout for the menu use Html.Action where you'll then have an action method that fetches the menu data.
2) Write a custom WebViewPage and include a property that has something like
return ((BaseController)ViewContext.Controller).MenuData;
now you don't even need a model in your partial view, it can access the data directly.
Both of these require having a Menu property containing all menu information available in your base model, but if every page in your websites going to need to access this data, then that seems appropriate.
Edit: In response to your tidiness concern, it sounds like you want sections, which give you the ability to customize pieces of your menu either in their appropriate view page or sub layout.
See http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx for an overview of sections and http://blogs.msdn.com/b/marcinon/archive/2010/12/15/razor-nested-layouts-and-redefined-sections.aspx for information of nested layouts/sections.

MVC3 ActionLink nightmare

I have a dashboard page which has 4 partial views.
each view has an edit link which when clicked, loads another temaplate.
Now ofcourse the new template will have Save and Cancel. When I click on cancel, i want to load the old view, and when click on save, i want to save the model and return to the old view.
all this has to be a partial update. How would i achieve this.
To start of with, i am using ajax action link (using post) to just return a datetime string. instead of updating my div, it is redirectin me to a different view.
MVC is ridiculously difficult. huh...
Ah.. MVC is simple once you establish a clean way to do things : )
so - each dashboard has 4 partials. So as one option - have your main page have four divs.
inside each div, use Html.Partial to render your views.
Each partial view has its own Ajax.BeginForm tag. The UpdateTargetId is the divs id in the parent view. I'm not a huge fan of a child needing to know the name of its parent to update, and there are some other ways (one option is each of the four views really is two other views for each one - one to contain the form and div that is updated and then a call to the partial view like:
Each 'parent' partial view has for example
<div id='divAddressEdit'>
#using (Ajax.BeginForm("action","controller", new AjaxOptions() { UpdateTargetId = "divAddressEdit", InsertionMode = InsertionMode.Replace }){
#Html.Partial(....)
}
</div>
Lets assume you go with the first option where each partial view contains its own ajax form.
So - when the user saves - ok.. the ajax form posts back, and then RedirectsToAction() and renders the new content again. When cancel is clicked, the same thing occurs - the form posts and you reload the original info.
The key here are the ajax forms. I know I didn't include much code here - as I believe your post is more of a conceptual question - if it doesn't make sense I'll post specific samples.

Resources