I have three partial views that I load into a div based on radio button selection using jquery. Everything works fine on the loading and on the forms, however each partial form has a submit button(none on the parent form). I begin each partial form with:
<div id="newTicketPartial">
#using (Ajax.BeginForm("CreateNewTicket", "SubmitTicket", new AjaxOptions() { UpdateTargetId = "newTicketPartial", HttpMethod = "POST" }))
The issue is that within this form once I finish entering data and click the submit button it seems to skip this forms ajax post back header and instead uses the parent views #using Html.BeginForm
If I put an action and controller in the parent forms BeginForm field it will use that, otherwise there is an error. My problem is even if it does use the parent views POST path my controller only returns the partial view that I was editing, which updates the entire page. I need to be able to submit information from each partial view and have only that partial view be updated, not the entire page. I am open to suggestions of ways this can be done. If more code is desired I will post more.
Nested forms are the issue. You should not nest forms, or else any buttons further down the page (even those generated by partial views) will cause the parent form to POST.
Related
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()
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.
I have four partial views on my page. And on each partial view I am using AJAX.BeginForm. In each partial view I have one submit button and on click of that button I want to validate the controls of that partial view only. I have included inbuilt js files jquery.validate.unobtrusive.js and jquery.validate.min.js in my master page i.e. layout.cshtml
But if I use AJAX.BeginForm in my partial view then it does not validate the controls because those js files are not included in this ajax form.
One way is that I include all those js files in each Partial view but I do not want to take this approach because it is making my page very heavy.
Is their any other way that I can validate my controls without including all js files in all partial views.
Thanks in advance.
Re-attach the validators after the partial view is loaded. Like this:
$(function (){
$('yourSelector').removeData("validator");
$('yourSelector').removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse('yourSelector');
});
yourSelector can be the form.
I have a view with two forms on it. Each form is marked like this:
Html.BeginForm("Details", "Forum", new { page = Model.PagedList.CurrentPage }, FormMethod.Post)
And each form has its own input button (type="button").
My problem is, when I click the button for one of the forms, the validation errors for the other form are added to the ModelState, so ModelState.IsValid == false.
How can I limit the scope of the validation to just the form I am clicking a button on?
Use Shared View instead to control your validations on different form.
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.