I am new at using ajax, I have to add the form data onto a post so that it can be added to the server. but the tricky part is that the form data is a partial view on a dialog box. i would like to know how i would be able to use ajax in order to get a hold of this data so that it can be put back on to a database.
make a function on click of a button in the dilog box
Then un that function use $.Post({"Controller/Action", {Parameter List}})
where PArameter List will contain the values of controls Like
Parameter1=document.getelementbyid('Textbox1').value;
so on ....
and make a action method in controller using [HTTPPost]
you can check syntax from here
http://www.codeproject.com/Articles/426765/post-and-get-in-MVC-Razor-JQuery
Please Click the answer as useful if it serves your problem.
Related
i have some form with dropdownlist, i want when i select that dropdownlist, the value is passed into controller without page reload, and then change that form based on value pased, without page reload too. I have search for reference like ajax, etc, but none works for me. Please help,
I have two action in controller with that view, one to show the form and one to process httppost with that form, do i have to make one more for this?
Thankyou
What you could do is use an Ajax:
-It's be better to use MVC API controller. (Read about Api controller)
-If you want to use the controller then add the path to the routing table
Example:
-Your dropdown list onSelection/Change should trigger your JavaScript function.
-Your javaScript function should contain the following:
-(Read about how to pass json Objects around).
var json = { //You will use json to send your selected value to your controller or api
selectedValue: SelectedValue
}
$.post("//Path for controller/FolderName/Controller/MethodName", json, function (data) {
//Code after data received
if(data.success == true){//display message etc)
});
Alternative:
Create another page with the form and use razor to edit the form.
You could try the $get function in Jquery.
On change event of the drop down you can call a javaScript method to use $get:
Example
$.get(url, function (data) {
$YourDiv.html(data); //re-insert the form into the page
}
https://api.jquery.com/jquery.get/
I have a main view which is having a partial view placed inside a ajax form. Upon the form submission I am returning another View but the problem is that the returned view is rendered in the earlier loaded main view only. It does not opens as a separate view.
I think that the problem could be due to the use of ajax form which is calling the controller action method but I am not sure.
Any help would be appreciated .
This is the expected behavior with ajax. Btw you are not using Ajax, but Ajah as you are returning HTML and not XML/JSON.
Ajax will not open a new page or popup without writing javascript code. Ajax is a way to transmit data between the current page and the server.
If you use Ajax.BeginForm, you can specify the ID of the dom element in which the HTML returned from your action should be attached.
If you use Html.BeginForm, you are not using ajax at all.
This is what I've tried:
In Controller:
public ActionResult Detail()
{
List<string> list = new List<String>();
return View(list);
}
In View of Detail:
#model dynamic
<!-- some HTML -->
<script>
#Model.add(document.getElementById("input_box").value);
</script>
Problem is, intelli-sense is not detecting that the passed in object is a List so #Model.add doesn't work.
My goal is to pass a list into the view so I can gather data from user inputs, and then use that list of data in my controller. Any ideas?
The current problem can be solved by using a statically typed model:
#model List<string>
<!-- some HTML -->
<script>
#Model.Add(document.getElementById("input_box").value);
</script>
However, you'll quickly hit another wall when the compiler complains that it doesn't know what document is. That's because the Razor view is rendered on the server side, but document is an object provided by the browser on the client side. You simply can't dynamically add elements to this server-side list from the client. You'll need to encode your list somehow for the client to be able to read, say in a JavaScript array. Then dynamically modify the list on the client side, perhaps using the JavaScript .push method. And then post this back to the controller in a separate action.
It's not going to be that simple.
Firstly, the Razor statement you used
#Model.add(document.getElementById("input_box").value);
is not a valid C# statement. It will cause an exception when you try to open the page, because the Model type you're using (List<T>) does not have a method called add (though it has Add), and further because that javascript is not valid Razor code either :)
Secondly, you seem to be confused about how the server-client interaction works.
You need to carefully think about how what you want to do can be realized--
For you to be able to get information from the client (the user's browser), you first need to render the page, send it to the client, let the user (or whatever) enter the information, and then get them to send it back to a Controller action. At the moment your page is not even rendering, so you couldn't hope to get data from anyone.
This can still be solved in numerous ways, one of which is to use Html.BeginForm(...) to create a simple form and have an input element and a submit button somewhere in there.
If you can get the user to submit the data back to you, you can then do whatever you like with the data in the previously mentioned Controller action.
Okay, solved it by creating a global array in the JavaScript of the View, then passing it to a Controller function as a parameter with Ajax.
I have an "Edit Profile" lightbox on my page, which posts to the controller via jQuery ajax. I handle the response in the jquery end instead of returning a View. However, when the profile is saved, I need to refresh the values on the page displaying the popup. How could I achieve this in MVC2? For example, if the user changes her name and avatar (in the lightbox), after she saves the profile, I'd like to update the avatar and name everywhere it occurs on the page.
Well what i would be doing is make your Controller return a PartialViewResult, which the end result is basically HTML.
The Partial View would be the popup itself, so essentially your calling your Controller method via AJAX, doing your server-side work, then re-rendering the Partial View to the client.
Have the action you post to via jQuery return a success for failure message. If it is a success, change the avatar/name/etc on the page using the values already in the textboxes (i.e.: the values you posted to the controller). If it is a failure message, display the validation errors.
In your jQuery AJAX, everything can be done in the callback function of the AJAX request.
Prabhu - both your profile page (i.e. the 'main' div contained within it) and the popup div should be partialviews. on posting the popup back to the server, you should requery the main page partialview and return the appropriate html, targetting the 'main' div.
that's certainly the approach that i take for a very similar task.
I have an MVC view that contains a number of partial views. These partial views are populated using partial requests so the controller for the view itself doesn't pass any data to them. Is it possible to reload the data in one of those partial views if an action was triggered in another? For example, one partial view has a jqGrid and I want to refresh the data in another partial view when a user selects a new row in this grid.
Is there a code example for this scenario (in C#) that I can look at to see what am I doing wrong? I am using ajax calls to trigger a new request but non of the partial views are refreshed so I am not sure if the issue is with the routing, the controller, or if this even possible at all!
Thanks!
If your partial view action returns a ViewResult, the response contains an HTML chunk. However, an Ajax call does not automatically insert the result into the DOM, as the result can be in any number of formats and/or might need additional processing before the DOM is updated. So, in order to get your partial view refreshed, you need to take the result of the Ajax call and insert it in the right place in the DOM tree.
jQuery has a nifty load() method, that will encapsulate this process for you. It'll make the Ajax call, take the result and replace the inner HTML of the selected element. You can even pass it your own function to be executed before it inserts it in the DOM tree, if you need to transform the result in any way.
Side note: jQuery.load() strips scripts returned in the result. It does retain them for execution in certain sceanrios, but it does not even execute them in other scenarios. So, if your partial view contains scripts, you might consider updating the DOM tree yourself.
All that this has nothing to do with your C# code, which runs on the server side.
However, you do have the ability to make your action a little bit smarter by checking if the request is plain HTML, so the result will be rendered by the browser directly, or if it's an Ajax call and the result will be processed by your script before getting in the DOM. This check is done using the Request extension method IsAjaxRequest.