I have email function that send 5 person at one time. I call this function in controller called submitemail. I want to put loading when the email function triggered. I want to show message to user that email sending is successful or not. How to do it?
Call your controller's action with ajax...show a loading image before ajax call...and hide the loading image in oncomplete event of ajax function...and also show appropriate success and error message.
You can use
#using (Ajax.BeginForm("ActionName", null, new AjaxOptions
{UpdateTargetId = "dialog-model", InsertionMode = InsertionMode.Replace
}, new { id ="AjaxForm" }))
{
...form here
}
AjaxOptions is an object that can get succes in succes you can show message
new AjaxOptions()
{
UpdateTargetId = "divPlaceholder",
InsertionMode = InsertionMode.Replace,
OnSuccess = "alert('OnSuccess')",
OnBegin = "alert('OnBegin')",
OnComplete = "alert('OnComplete')",
OnFailure = "alert('OnFailure')"
}
Related
I have the following code in my View,
It's for searching in a site, a user can submit the following form multiple times.
#using (Ajax.BeginRouteForm("Search", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "SearchContents",
LoadingElementId = "SearchAjaxLoader",
OnSuccess = "SearchLoadContentsOnSuccess",
OnFailure = "SearchLoadContentsOnFailure",
OnBegin = "SearchLoadContentsOnBegin",
OnComplete = "SearchLoadContentsOnComplete",
}))
{
#Html.AntiForgeryToken()
<input type="text" name="Search" />
<input type="submit" value="Submit" />
}
I wanna reject old ajax results and show the latest ajax result only.
In a non mvc Ajax form, I was creating an array as ajax counter and compare the server responses with it to prevent update html.
I wanna know how I can prevent Ajax.BeginForm to update Html on some conditions.
As an example I will demonstrate with an OnSuccess call, you can do this for each event you wish to handle.
In your AjaxOptions remove this to prevent the replace;
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "SearchContents",
In you SearchLoadContentsOnSuccess JavaScript method, without seeing the method I am guesing it will be something like this:
function SearchLoadContentsOnSuccess()
{
// Do something
}
Change it to this:
function SearchLoadContentsOnSuccess(e)
{
// Do something
}
Now the e parameter will contain the data that is sent back from your ajax call.
In your updated method, I would simply check the response and act acordingly.
As an example if you response contains a value and results property:
function SearchLoadContentsOnSuccess(e)
{
// Do something
$(e.value == 1)
{
$('#SearchContents').html(e.results);
}
}
You would simply change the javascript in the above method to suite your needs.
I have the following code in a MVC c# Razor view:
#{string url = "/Projects/_MonthRangesScriptsPartial";}
#using (Ajax.BeginForm(
"_MonthRanges",
"Projects",
new { id = ViewBag.InputResourceID },
new AjaxOptions {
HttpMethod = "POST",
UpdateTargetId = "MonthRanges",
InsertionMode = InsertionMode.Replace,
OnComplete = "updategraphArrayScript(#url,#ViewBag.InputResourceID)"
}))
The code works almost perfectly, but I would like to resolve the c# variables to their values in the OnComplete line.
That is to say, the Razor engin should resolve the code to (for example):
<form action="/Projects/_MonthRanges/55"
data-ajax="true" data-ajax-complete="updategraphArrayScript(/Projects/assets,55)"
...>
Rather than:
<form action="/Projects/_MonthRanges/55"
data-ajax="true" data-ajax-complete="updategraphArrayScript(#url,#ViewBag.InputResourceID)"
...>
Simply create another variable string:
#{
string url = "/Projects/_MonthRangesScriptsPartial";
string onComplete = String.Format("updategraphArrayScript({0}, {1})", url, ViewBag.InputResourceID);
}
#using (Ajax.BeginForm(
"_MonthRanges",
"Projects",
new { id = ViewBag.InputResourceID },
new AjaxOptions {
HttpMethod = "POST",
UpdateTargetId = "MonthRanges",
InsertionMode = InsertionMode.Replace,
OnComplete = #onComplete
}))
Take off the # when you assign your OnComplete value. You don't need it since you're already in the context of server side code.
# is used to switch html rendering context to server side code, and <text></text> is used to switch from server side context to html rendering. In example given above, you're already in the server side code context of the BeginForm() method so the # is not needed. You're not writing the value of onComplete to the page, BeginForm() will handle all that.
I have an #Ajax.ActionLink that replaces his own wrapper, with another content that also has #Ajax.ActionLink, that returns first html content to wrapper. It's link to partial that replaces it's self and viceversa. My problem is that when i want some aditional functionaliti on click to ActionLink, my Jquery returns old partial, the one that has been click, and not the new, in firebug i clearly see my new elements, but cannot reach them, i tried, OnSuccess and OnComplete, but didnt succed! Any ideas?
Here's example:
VIEW
index.cshtml
<div id="box">
#Html.Partial("_PartialOne")
</div>
_PartialOne.cshtml
#Ajax.ActionLink("Get partial two", "getPartial2", "Home",
new AjaxOptions
{
UpdateTargetId = "box",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET"
},
new { #class="first"}
)
<div id="testBox1">Hello, I am partial 1</div>
_PartialTwo.cshtml
#Ajax.ActionLink("Get partial one", "getPartial1","Home",
new AjaxOptions
{
UpdateTargetId = "box",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET"
},
new { #class="second"}
)
<div id="testBox2">Hello there this is partial 2</div>
CONTROLLER
HomeController.cs
public PartialViewResult getPartial1()
{
return PartialView("_PartialOne");
}
public PartialViewResult getPartial2()
{
return PartialView("_PartialTwo");
}
JS
$("#box a.first").live('click', function () {
//how to fetch new data, that was filled with getPartial2()
console.log($(this).parent().children());
//this returns [a.first, div#testBox1]
// and I need [a.second, div#testBox2]
});
How to select returned data to let's say substring if neccesary??
EDIT
using OnComplete = "function"
VIEW
#Ajax.ActionLink("Get partial two", "getPartial2", "Home",
new AjaxOptions
{
UpdateTargetId = "box",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET",
OnComplete = "getNewData"
},
new { #class="first"}
)
<div id="testBox1">Hello, I am partial 1</div>
JS
function getNewData()
{
console.log($(this));
//this returns [Object] of ajax call, niether
// $(this).parent/s(), or $(this).children() is posible
}
How to select children of element that called this ajax?
I guess I am not 100% what you are looking for, but I think maybe your issue is caching. If you tack a unique parameter onto the GET request, do you get the result you are looking for?
#Ajax.ActionLink("Get partial two", "getPartial2", "Home", new { aparam = DateTime.Now.Ticks },
new AjaxOptions
{
UpdateTargetId = "box",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET",
OnComplete = "completeGetThing"
},
new { #class="first"}
)
<div id="testBox1">Hello, I am partial 1</div>
I am working with AJAX Helper method in one my applications, things were all good and right but suddenly am facing this strange problem i.e. in view
<% using (Ajax.BeginForm("Feedback", "User", new AjaxOptions { InsertionMode = InsertionMode.InsertBefore, HttpMethod = "POST", OnFailure = "searchFailed", OnSuccess = "feedbackRecorded", LoadingElementId = "ajax-loader-fb", UpdateTargetId = "newsletter", }, new { #id = "feedback" })) { %>
The first parameter to Ajax.BeginForm that is the {action name} is now being marked in red color(I am using Resharper) and says that ‘cannot resolve action ‘ActionName’’, however the Action is present in my controller.
Another strange thing is that on running the app and submitting the form it ends up invoking the Javscript’s "OnSuccess” method as if it has succeeded but in actually nothing happened and it didn’t even get to first line call of the specified controllers action. (This is happening to both AJAX forms in the view)
Does anyone have any ideas about the possible reasons forit to behave this way suddenly?
Thankyou!
I just created a new 'SharedController' controller with the same action in it and now it is recognizing but its is not recognizing in the UserController?
public class SharedController : Controller
{
public ActionResult Feedback()
{
throw new NotImplementedException();
}
}
Maven, about ReSharper - it's complaining right, because you use this method overload
public static MvcForm BeginForm(
this AjaxHelper ajaxHelper,
string actionName,
Object routeValues,
AjaxOptions ajaxOptions,
Object htmlAttributes)
where second parameter is routeValues, so ReSharper looks for action 'Feeeback' in current controller.
Obviously, you wanted another overload, with this invocation
<% using (Ajax.BeginForm("Feedback", "User", null, new AjaxOptions { InsertionMode = InsertionMode.InsertBefore, HttpMethod = "POST", OnFailure = "searchFailed", OnSuccess = "feedbackRecorded", LoadingElementId = "ajax-loader-fb", UpdateTargetId = "newsletter", }, new { #id = "feedback" })) { %>
Pay attention to third null argument.
The second parameter of Ajax.BeginForm is the controller name.
Try changing the code to:
<% using (Ajax.BeginForm("Feedback", "Shared", ...
How do I create a default AjaxOptions? For example, I have a menu with some links, I want to make the entire website to use the same loading element and same error handling.
#Ajax.ActionLink("Home", "Index", "home", <AjaxOptions>)
new AjaxOptions()
{
OnFailure = "handleError",
LoadingElementId = "loading"
});
But then I have some links that update the content and I want to set UpdateTargetId for each of those links. How can I keep a default error handling and loading element on all the views and edit only UpdateTargetId or OnSuccess (or another property) for each link?
Something like
#Ajax.ActionLink("home", "Index", "home", ajaxOption.UpdateTargetId = "content")
#Ajax.ActionLink("menu", "Foo", "home", ajaxOption.UpdateTargetId = "side-content")
I want something equivalent to jQuery.setup where I can set the default values to ajax requests and when I make an ajax request I only tell the parameters I want to override...
You could do something like:
public static class AjaxExtensions
{
public static IHtmlString DefaultLink(this AjaxHelper helper, string text,
string action, string controller, string updateTargetId = "",
string onSuccess = "")
{
// Build your link here eventually using
// the arguments passed
var options = new AjaxOptions
{
OnSuccess = onSuccess,
UpdateTargetId = updateTargetId,
OnFailure = "handleError",
LoadingElementId = "loading"
// etc...
}
// return a normal ActionLink passing your options
return helper.ActionLink(text, action, controller, options);
}
}
Note I'm using optional parameters in the signature to benefit from the flexibility of multiple overloads without the nuisance of maintaining them. Expand as needed :)
Then just use it as follows:
#Ajax.DefaultLink("home", "Index", "home", updateTargetId: "content")
I found it easier to inherit the AjaxOptions class and instantiate DefaultAjaxOptions in my view. This means you can use it for things like Ajax.ImageActionLink if you have one of those without creating a separate extension method. See example below, the only thing I needed to change was the target so I allowed this to be passed into the constructor.
public class DefaultAjaxOptions : AjaxOptions
{
public DefaultAjaxOptions(string target)
{
InsertionMode = InsertionMode.Replace;
UpdateTargetId = target;
OnBegin = "BeginLoadingSection()";
OnFailure = "FailureLoadingSection()";
OnSuccess = "SuccessLoadingSection()";
}
}
then in the view use:
#{ var ajaxOptions = new DefaultAjaxOptions("name-of-content-div"); }