I have a ASP.NET MVC application which has a view populated with a model which needs to retrieve some data from the user. Besides that, I also have a hidden div tag which contains more information but it should be visible only after the model was sent to the controller on a POST request and after it has processed the information from the model it should change the div tag to visible. Is some way to signal the view that the request was processed and render visible the div tag, remaining on the same page. I believe this is similar to a partial postback from ASP.NET.
Thanks,
Tamash
Yes that's possible via some AJAX functionality. I'm using jQuery in my example:
$.post('Controller/Action', $('#formId').serialize(), function() {
$('#yourDiv').show();
});
This uses jQuery to post the data contained in a form with the HTML id 'formId' to a URL 'Contoller/Action' and shows the div with id 'yourDiv' in case the AJAX request finished successfully. The call $('#formId').serialize encodes the form elements in HTML form with id formId for submission in the AJAX request.
More on jQuery and AJAX here
Related
I am using ASP NET MVC4, I want to use partial view to update my main view. On the server I get certain events from another server, and when that happens I want to update the partial view and post it to the client. How can I do that? In other words, I want a way to force rendering partial view on the server side without a postback request coming from the client. Is that possible, or the client must be informed first and then does its own postback action to trigger the partial view rendering?
Call The follwing Ajax call on every other server event or call it periodically
$.get('#Url.Action("ActionName", "ControllerName")', function (data) {
$('#Id of div where Partial View is renderred').html(data);
});
In the action called.
public ActionResult ActionName()
{
//load your model with changes
return PartialView("Name of your partial view", model);
}
This is a better job for SignalR for large scale Real-time work reference:
[http://www.asp.net/signalr/overview/signalr-20/hubs-api/hubs-api-guide-server][1]
Or if you just need to stay on single medium, you can look into node.js, which is Server side javascript and allows for binding of js function to server driven events (i.e. Client independent)
One last thought would be to use events and kick out Web Api Responses, but that would be getting a lot of weight on JSON without page requests.
Here's the situation: I have a Razor-generated list of items (that needs to stay Razor-generated):
#model MG.ViewModels.Profile.ProfileDetailsViewModel
foreach (var interest in Model.Interests)
{
<span class="subject-title">#interest.SubjectName</span>
<a data-bind='click: function(){viewDescription(#Html.Raw(Json.Encode(interest)))}'class="subject-description-button" href="#" title="View Details">details</a>
}
Users can update the details of each item by clicking a 'Details' link that encodes the Model for the viewDescription javascript function:
self.viewDescription = function (data) {
// pull data into KO observables
self.selectedInterestDescription(data.Description);
self.selectedInterestSubject(data.SubjectName);
self.selectedInterestId(data.InterestId);
self.triggerModal(true);
};
Within the modal that gets triggered, the user can send an AJAX request to an endpoint that updates the description. This much is working as I'd expect.
What I'm struggling with is - when the user is done updating, the razor Model still has the old data. So when the user clicks 'details' from the Razor-generated list after updating, the old #model data is encoded. How can I push the updated data to the #Model from javascript?
How can I push the updated data to the #Model from javascript?
You absolutely cannot modify anything on the server from javascript. All you can do is an AJAX request to the server which will return refreshed data to the client. Remember that once the view is initially rendered there's no longer any notion of #Model on the client. So talking about updating something that doesn't exist hardly makes any sense. After your AJAX request succeeds simply update the corresponding portions of your DOM that need to be updated. The controller action that you are hitting with AJAX could return all the necessary information for that.
i am new in mvc...now learning but for a long time i am attach with asp.net web form technology. many way we can load user control in webform.
1) suppose when user click any button then a postback occur and a server side method call. from that server side method we can instantiate user control or load user control and add it to page from code behind.
2) another way we can load user control dynamically by jquery. we can call server side function by jquery. and from that function we can load user control and get the user control html and send that html of the usercontrol to jquery function as return result.
so i believe the same thing can be done in mvc too. so discuss all the possible way to load partial view dynamically at client side from action method and also jquery.
how to get the html of partial view here from action method ? please discuss point wise and with sample code.....because i want to learn all good tricks.
Depending on your requirements there are a few scenarios available to you:
1) Utilize a combination of Javascript and jQuery to do an ajax call, get a JSON result, and then reneder the control from a call to a partial method and $("#element").html({jsondata}).
2) Utilize the AJAXForm object to present a form that will be replaced on submission with your desired user control (called from a partial).
3) Pre-render the partial but have it hidden and on successful submission display the hidden control, or update and show depending on your needs.
I have an MVC view that contains a JQuery UI dialog that can be opened and populated with data.
<div id="dialog">
.... Table of phone numbers
</div>
<div id="personData">
... Person model data
</div>
I am attempting to pass the data from the JQuery UI dialog along with the rest of the MVC View data to a controller action.
public ActionResult Save(Person person, List<PhoneNumber> phoneNumbers)
{
}
In this example the Person type is not part of the dialog and is posted fine. The phone numbers is in the div of the JQuery UI dialog and does not post.
The elements in the dialog are defined in the View and can be seen in the DOM but for some reason something is preventing the data to post along with the rest of the View data. If I remove the .dialog() declaration from the the "dialog" div (now the div is visible on the form), the data (phoneNumbers) will post.
So my question is how do you post the JQuery UI dialog data along with the View data from the form to a controller action? (I know how to post the UI dialog data using a button within the dialog, but I need to post it alongside my main View because of the state issues around this data).
Chances are the dialog box moves the div outside of the form so the fields aren't submitted. You might just link the fields to hidden ones outside of the div or increase the span of the form.
Just as stimms said, you will need to put the data into some fields inside the form you'll be submitting to the action.
Do something like this inside the dialog click function (using jQuery .val())
$("#formFieldName").val() = $("#dialogFieldName").val();
Repeat this for each field.
After that, the fields (probably hidden fields) inside your form will contain the data when you submit the form.
I have an AJAX form that I am creating in my MVC project. If the form is submitted using normal browser function and a page refresh occurs I get validation information rendered in the form (the built in MVC validation based on ViewData.ModelState).
Is there a similiar validation mechanism for AJAX forms?
<% using (Ajax.BeginForm("Create", "GraphAdministration", new AjaxOptions()
{
OnSuccess = "newGraphSuccess",
OnFailure = "newGraphFailure",
HttpMethod = "POST"
}))
{ %>
<!-- some form stuff in here !-->
<% } //end form %>
It really depends on where you are getting the content from to display once the form has been posted. The Validation summary is performed created on the server so that is where you have to do the work.
As an example I was using some partial content in an .ascx file to render a form. You get the form in the page the first time round by calling the action directly with Html.RenderAction
You would have your Ajax.BeginForm etc. in the .ascx file. Then call it directly in an action.
When the Ajax call is made from the browser you get it to post to the same action. That way you can do all of the server side validation that you would normally. You should set up the Ajax call to replace the original form with the new html that is returned by the action.
One thing that you have to be aware of is that the replace JavaScript will replace the content of an element not the element itself so remember to us the id of a surrounding element.
Apologies if that is a little convoluted, if you want more details just comment and I'll flesh out the relevant bits.
Extra Detail:
All of this assumes that you are doing all of the validation on the server.
You are going to have a View that has all of the page stuff in it and then some partial content in a .ascx file, this is where your ajax form lives, it needs to be set to replace content by id. Its easiest if it has the same name as the action your ajax is going to call.
You can use Html.RenderAction to get it into the View. You can also pass in data with other versions of the same method. Your essentially calling it in the same way your ajax code will.
You will need to wrap it all in a div with an id set. Use this id in the partial as the content to replace.
When you render the page the html for the form and all of the ajax stuff will get put in.
When the ajax action is called the partial content will be returned with any validation performed. It will replace the content of the div that you gave the id to.
You can have different versions of the action by using [AcceptVerbs(HttpVerbs.Get)] and [AcceptVerbs(HttpVerbs.Post)] attributes
The main problem with this method is that its not self contained, the div with the id is external to the partial.