ASP.NET MVC AjaxActionLink OnComplete and OnSuccess property and Jquery - asp.net-mvc

I'm trying to create a dialog box in my ASP.NET application with an AJAX ActionLink.
The Ajax ActionLink inserts a partial view into a div in the current view.
I've called a function OnComplete (and I've tried OnSuccess, too) that calls the dialog function for JQuery UI, like so:
function() loaddialog {
$("ContainerwithInsertedPartialView").dialog();
}
Nevertheless, it display the dialog. Any ideas as to what I'm doing wrong?

You have your function definition wrong, for one. You need to use the id selector (prepend a hash) for another.
function loaddialog() {
$('#ContainerwithInsertedPartialView').dialog();
}

Related

Asp.net MVC - call database on dropdown value change

I am new to MVC. i want call database on dropdown value change. Does anybody know how to do that.
Regards,
vangli
MVC does not have a post-back mechanism as such as you had in WebForm (well, this was being carried out as javascript posting the form.
What you can do is create some javascript using jquery if you want to trigger some action when the item in that dropdown changes. it would be, (assuming the id of the dropdown is idDropDown
$('#idDropDown').change(function () {
$.ajax(#Url.Action("AjaxAction", "MyController")', { selection : selectedValue }, function (data)){
//handle ajax response here
};
});
Your action controller will be like this:
public ActionResult AjaxAction(string selection)
{
// do your server-side processing and get your data
return Json(data);
}
With out jquery you can POST the data to controller action using pure java script.
#Html.DropDownListFor(m => m.SelectedValue,Model.SelectListItems,new{ onchange = "this.form.submit();" })
Note: Here simply you can submit form by adding java script code to on change. This is similar that you click on submit button.

How to execute Action method on click through scripts

In my app I have a button. By clicking this button I want to execute an action method.
This action method does not have any view.
My requirement is: "call this action method in on click event"
How can I execute the the method on the click event?
my Onclick event is
$('#Delete').click(function () {
#* #(Url.Action("Delete", new { id="cera123"}))*#
$.ajax({
url: '#(Url.Action("Delete", new { id="cera123"}))',
type: "GET",
success:function () {
alert('deleted');
}
});
my action method is
public ActionResult Delete(string id)
{
obj.EmpLi.RemoveAll(x => x.EmployeeId == id);
return RedirectToAction("Index", obj);
}
delete action is performed but i an see the result after voluntarily refreshing the page even though i gave RedirectToAction("Index")
thanks
$(function(){
$("#yourbutonId").click(function(){
$.get("/controller/action/id",function(data){
//data is what your action return
});
});
});
nilesh is right $.ajax is js,and $.get is sample use base on $.ajax
or $.post
to make these code work,you should ref jquery.js
Some background info...
If you come from the webforms and code-behind world is common to you that an HTML element calls a script in the code, but actually what asp.net webforms does is an http call to the script on the server. If you had an updatepanel, asp.net webforms would have done the same call via ajax.
That's the reason why in asp.net webforms the elements have the preceding asp: on their branded html tags. That way asp.net can convert their branded elements to real HTML elements.
The answer
The only way to execute the code of an action from an HTML element on-click event in asp.net MVC is by calling the URL that gets to that method. Either via ajax or by a request from the browser, an http request needs to be done.
With javascript you can listen when an element's on-click event is fired and then do some logic. If you're using jquery you can use the $.ajax() or $.get() methods to make a call to your action URL.

MVC call controller from radio button onclick

How can I call an action in my controller and pass a parameter from a radio button onclick event? I'm new to MVC....
I have this code which will call a javascript function, but I wanted to see if I can call an action and pass a parameter instead of calling a javascript function
#Html.RadioButtonFor(m => m.SiteAddressModel.SiteId, item.SiteId, new { #onclick = "radiobuttontest();"})
This is on of the differences between asp.net MVC and webforms in both cases you are using javascript to make a post or ajax call the difference is in webforms it's hidden by the framework. MVC give you greater control but it requires you do the work, if you have the javascript working your done.

ASP MVC + AJAX, trying to Update a div asynchronously

I'm new to Asp MVC, and I'm trying to accomplish a little async update (I'm using MVC3 RC2, with Razor, but I can manage with ASPX solutions too).
I have a Master page, which renders a shopping cart box on every page by calling Html.RenderAction("Cart","Shop"). The Cart action of the ShopController calls the database, etc, and outputs the results. This works.
First problem: if I put an ActionLink in this partial view (like Html.ActionLink("Remove")), then even if I call PartialView() from the Remove action, it renders only the shopping cart, and nothing else (in essence, my page disappears).
Second problem: There is a div called "cartContent" inside this partial view. I want to be able to put a link ANYWHERE (not just on the Master page or in the partial view), which when pressed calls a controller Action, and then updates ONLY the cartContent div based on the results. I've tried Ajax.ActionLink but it does the same as Html.ActionLink, even though I imported the Microsoft.MvcAjax js libs.
Also, if I solve the first problem, I want that to be async as well.
What solution do I use? I've tried setting UpdateTargetID to "cartContent", I've tried wrapping the cartContent into an Ajax.BeginForm, nothing. Do I HAVE to use jQuery (which I know nothing of)? Do I serialize some response to JSON, and update the div manually in Javascript? (I'm not really good at JS, I'm coming from the C# side of things)
You put a link wherever you want:
#Html.ActionLink("remove item", "remove", "somecontroller",
new { id = Model.Id }, new { #class = "remove" })
And then in a separate javascript file:
$(function() {
$('.remove').click(function() {
// when the link is clicked
// perform an ajax request:
$.ajax({
url: this.href,
type: 'delete',
success: function(result) {
// when the AJAX call succeed do something with the result
// for example if the controller action returned a partial
// then you could show this partial in some div
$('#someDivId').html(result);
}
});
// don't forget to cancel the default action by returning false
return false;
});
});
Remark: if the div you are updating contains also the link then you might need to use the .live() function or the click event handler will not work the second time because the DOM will be modified:
$('.remove').live('click', function() {
...
});

ASP.Net MVC Ajax call that returns JsonResult

I'm starting to learn ASP.Net MVC (the release candidate), and I'm having a little trouble. I might just be being picky, but I thought I'd ask.
I want to use the built-in (extended) ASP.Net Ajax methods to make a call to my controller, called "GetNames," that returns a JsonResult object. I've seen examples that use the $.getJSON() jQuery method, but I would instead prefer to do something like this:
<%using ( Ajax.BeginForm("GetNames", new AjaxOptions() { OnSuccess = "GetNamesSuccess", OnBegin = "GetNamesBegin", OnComplete = "GetNamesComplte", OnFailure = "GetNamesFailure" } ) ) { %>
<%=Html.TextBox("DummyData") %>
<input type=submit />
<% } %>
<script type="text/javascript">
function GetNamesSuccess()
{
alert("Success");
}
function GetNamesBegin()
{
alert("Begin");
}
function GetNamesComplete()
{
alert("Complete");
}
function GetNamesFailure()
{
alert("Failure");
}
</script>
When I click the Submit button, I get none of the alerts, and I get prompted to download a file containing the text of Json object, which I believe indicates that at least the controller method is working fine. But that's not the intended behavior for me... Ideally, Ajax.BeginForm would set it up such that the Json object would get passed to either the OnSuccess or the OnComplete method.
Is there a way to accomplish that?
Have you included both the MicrosoftAjax.js and MicrosoftMvcAjax.js javascript files in your view page? It sounds to me like it is actually posting the form instead of using Ajax. I've had this problem when I was missing the MicrosoftAjax.js include because the Ajax postback failed due to missing javascript classes and thus it invoked the normal form post.
On a related note, you should check to see if the request is Ajax or not in the controller and return a ViewResult (or Redirect) instead of Json if it's not. If someone has javascript turned off or you have errors on your page you want it to gracefully degrade and handle it as a normal postback rather than return Json.

Resources