i'm having a little problem here,
I have a table based calendar view that has, on each day, an ajax link that renders some day-specific form to the user to set for the selected day.
Then I want to select the day-specific data on the partial view that opened and save them also using ajax, but I also need to pass some info that is contained in the page model, like the selected day and month, year, etc.
The partial view that is loaded when I click on the day, is going to be the place where the user will chose some hospital duty info, like the duty start-time, the end time, the doctor that is going to be in charge of the duty, and on the page Model, there is the hospital ID, the day month and year of the Duty.
So how can I send the form data plus the page model to a controller that is going to save the data on the database?
Thanks.
i think there are at least 2 ways to do this.
first is on server side.
when you click the main page link,pass the main page model data which the child page need.url like controller/action?a=1&b=2... 1 and 2 are you main page model data.you can get these data in child action by add action method param.then you can pass them to child view use model,viewdata,viewbag
second is on client side.
you can put you main page model data to a js var(or think simply,a hidden input),and then you click the link and show you child page,the child page is part of the main page,so you can read the js var in child page.then you can do some js programe to show the js data in page
so,pass the data from main page to child action,or child page get main page data by js
So how can I send the form data plus the page model to a controller that is going to save the data on the database?
Instead of doing a form post, you could do a ajax post
$.ajax({
url: 'Controller/Action',
type: 'POST',
data: JSON.stringify({
'postData': postData
}),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: SuccessHandler,
error: ErrorHandler,
});
Related
I have an ajax call
$.ajax({
type: "POST",
data: $("#divInfoRecherche :input").serialize(),
url: '#Url.Action(Action, Controler)',
success: function(resultat) {
$("#tableauResultatRecherche").css("display", "");
$("#tableauResultatRecherche").html(resultat);
$.validator.unobtrusive.parse($('#PartialViewModel'));
}
});
The line $.validator.unobtrusive.parse($('#PartialViewModel')); makes it possible for the client side validation to pop, everything works fine.
Problem is when I click on Submit of the page, the message errors go back to the error of native JavaScript "This field is required" instead of my custom message linked in the model.
Option I think of is add the content of the partial view in the main view and populate it manually so that all the validations are added on Pageload.
But I still ask to see if another option is possible.
https://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/
Here is the script to add and call on the div containing the partial view.
I have a MVC Controller with an Index that will cycle through multiple PartialView as the user goes through the form process.
Here is the Index:
#section pageMain {
<div id="partialView">
#Html.Partial("SelectAccount", SUPR.Models.Account.GetAccounts());
</div>
}
This works fine and I get the SelectAccount page just fine.
My issue is that I have an AJAX call that runs when the user selects a row in a table on the SelectAccount page. What is supposed to happen is that the PartialView is then replaced with another PartialView that displays the details of the selected row. This actually does work, but after about 1 second it cycles back to the SelectAccount PartialView with a query string attached, for some reason, to the URL.
Before
After
Here is the code for the AJAX call:
$.ajax({
type: "GET",
url: "/Review/GetReviewView",
data: { profitCenter: profitCenterNo }
}).done(function (data) {
$('#partialView').html(data);
});
The ONLY that is happening in the controller for GetReviewView is that I'm returning the PartialView with the PartialView name and model. This working because, in that brief moment that I can see the ReviewAccount view, the proper data is in the fields.
Any thoughts as to why this odd behavior is occurring?
Are you capturing the event in JS? If you are triggering off of a click event then add the event parameter to the method and then at the end of the method add:
event.preventDefault()
And see if it still happens. It sounds like a client side JS issue, not a C# issue.
The way you are doing this is actually fine. There used to be a Microsoft library called ASP-AJAX or something, don't remember because I didn't use it much. This library basically allowed you to decorate HTML elements with ASP-AJAX-METHOD , ASP-AJAX-REFRESH-TYPE and it would automatically do something similar to what you are doing now. Go to the Server and retrieve a PartialView.
In my .Net MVC4 project the view contains partialviews, the partialviews replaced on another after each corresponding Ajax.Beginform with option InsertionMode = InsertionMode.Replace,
So the senario is
Partialview1 renders on first Ajax.Beginform call
Submit form, partialview2 render on 2nd Ajax.beginform, so partialview1 is replaced by partialview2
3. A previous button recalls partialview1
Im wondering how to implement step3 that goes to previous partialview with something simple as history back.
First Way: I think the best way to do that with browser Back button is to use history.pushState
How to implement it depends on your situation on View.
Some links about pushState:
http://rosspenman.com/pushstate-jquery/
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
Second Way: If you don't want to use browsers Back buttom you can use js:
function getBack()
{
$.ajax({
type: "GET",
url: '#Url.Action("ReturnPartialViewControllerMethod")',
success: function(data) {
// data is your view
$('#divForParticialView').html(data);
}
});
}
and in your Html:
Get Back
I've come from a Classic ASP background and have started developing ASP.NET MVC 4 with C#.
Previously in classic ASP I would post the whole form and page to the resulting URL. However in MVC4 I've seen other ways of just updating the partial view.
Basically at the moment on the left hand side of my page I have three different combo boxes with some data in. I have a Submit button that when pressed, I want to search my database and return a list of results from the database to a partial view (I've already got the code working to search the database and populate a list of objects.), so that the whole page isn't refresh.
In addition, for partial views, can then handling paging. For example my query could return 100 records, but the user only wants to display 20 per page giving 5 pages of results. Is this possible ?
Can anybody offer any examples of what I'm trying to achieve.
for updating your partial view you should use an ajax call
$('.btnSubmit').on('click', function(){
$.ajax({
url: "#(Url.Action("Action", "Controller"))",
type: "POST",
cache: false,
async: true,
data: { combo1: $('.Combo1').val(), combo2: $('.Combo2').val(), combo3: $('.Combo3').val() },
success: function (result) {
$(".Content").html(result);
}
});
});
then on your view just put a div with class that matches where it will put the returned partial view. For paging I just use a jquery plugin. Here is a page that has some options http://plugins.jquery.com/tag/paging/ Let me know if you have any questions.
I have created a web calendar using HTML,CSS and C# in an MVC application. The HTML is in a view and I have a controller with an action that initializes the Calendar and displays the correct days on the view.
It works as intended but the problem comes from the fact that I want to embed this calendar to a couple of pages in unrelated Views controlled by different actions and with different models loaded.
I could copy paste the view code and make the necessary adjustments to the model but that would not be ideal. I tried with RenderAction but the problem is that when I use the buttons to navigate to different months I leave the initial view. e.g.:
#Html.ActionLink("‹", "Calendar",
new { month = Model.RequestedDateTime.Month - 1, year =
Model.RequestedDateTime.Year })
Is there a way to modify this behavior?
Thanks
Html.ActionLink, alway creates a normal link, with have the common behaviour. If you want to share your calender.
To avoid redundant code, you may redesign the calender as a partial view and replace the link by a label for example. Bind an ajax function to the label-click-event to refresh the calender. Something like:
#Html.Label("<", new { onclick="pageMonthBack("+Model.RequestedDateTime.Month - 1+", " Model.RequestedDateTime.Year+");" })
I would place the called ajax functions in a script which is loaded separately.
I solved the problem in a similar way, to what developer10214 proposed. I used a div and in that I used Render.Action. Then I used the following code
$(function () {
$("#cal").on('click', "#backwards", function () {
$.ajax({
url: "Home/Calendar?target=backwards",
cache:false,
type: "GET",
success: function (result) {
$("#cal").html(result);
}
});
});
});
in the including page. And I did not use ActionLink at all.