We Keep Coding

How can I update multiple DOM elements using Asp.Net MVC Ajax's UpdateTargetId

How can I update multiple DOM elements using Asp.Net Ajax?
This is my code:
<span id="status">No Status</span>
<br />
#Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "status" })
<br />
<br />
#using (Ajax.BeginForm("UpdateForm", new AjaxOptions { UpdateTargetId = "textEntered" }))
{
#Html.TextBox("textBox1", "Enter text")
<input type="submit" value="Submit" /><br />
<span id="textEntered">Nothing Entered</span>
}
UpdateTargetID takes a single string. Basically I want something like in WebForms we would write updatePanel2.update() and that panel too would update itself regardless of it's position. I know that can be achieved using Jquery. But I am trying to know if there is something available in the framework itself so I don't have to write repetitive code of Jquery on all pages of my project going forward.

But I am trying to know if there is something available in the
framework itself so I don't have to write repetitive code of Jquery on
all pages of my project going forward.
There is no native framework support for mutliple UpdateTargetId's in AJAX. You have to extend default behaviours to support multiple update areas.
What you can do is to make one AJAX call, get all the results in the format of Json. Then iterate the data on client side using JQuery and update the relevant areas on the page.

You could have your panel describe itself and have a javascript code reading those information and performing the update for you. For instance, you could use the data-* tags available in HTML5 and compatible with HTML 4.1.
Just to give you an idea :
<div class="autoUpdate" data-target="/Controller/UpdateAction" >
//..Some HTML content here.
</div>
<script>
function test() {
$(".autoUpdate").each(function(i, e) {
var target = $(e).data("target");
//...AJAX Query here will return HTML. Just replace innerHTML with AJAX response.
}
}
</script>
Or you could also simplify this by creating an updating panel widget in jQuery. It's simple enough to extend jQuery's functionalities.

MVC2 C#: How can I populate a contentplaceholder with html from a file?

So.. The issue I have came across is I am migrating a client's web app to MVC2, and the original method for displaying html content is not capable of working with MVC so I am needing to update it. The functionality I need is like so: There is a side nav that will contain the actions, and say the user clicks on "FooBar" it will populate the "mainContent" placeholder with the "FooBar.html" file from a document directory. I would like to do this with no postbacks as well if it is possible. Any ideas?

You may use jQuery ajax to load the pages when user clicks on the link. load() function will be ideal here.
It is just HTML and javascript. Nothing specific to ASP.NET MVC
//Include jQuery library
<div>
<a href="Home/about" class="aLink" >About</a>
<a href="Home/FAQ" class="aLink" >FAQ</a>
<a href="Home/Contact" class="aLink" >Contact</a>
</div>
<div id="mainContent">
</div>
<script type="text/javascript">
$(function(){
$("a.aLink").click(function(e){
e.preventDefault(); // prevent the default navigation behaviour
$("#mainContent").load($(this).attr("href"));
});
});
</script>

MVC ajax not working

I have this code in my .cshtml:
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<span id="status">No status</span> <br />
#Ajax.ActionLink("Server Date", "ServerTime", new AjaxOptions { UpdateTargetId = "status"})
This is the method in controller:
public string ServerTime()
{
return "Server date: " + DateTime.Now;
}
When I click the hyperlink, the reponse comes on a different page i.e the DOM is not updated. Instead, I get redirected to Home/ServerTime.
Can anybody tell me why is this happening? The script files are correctly downloaded and I checked it in Firebug.
Thanks in advance :)

asp.net mvc 3 by default uses unobtrusive ajax. So you should include script jquery.unobtrusive-ajax.min.js, not the MicrosoftMvcAjax ones. As the script is not included, javascript does not parse the ajax link data, so it stays as ordinary link.

Add OnSuccess method parameter in AjaxOptions

How to use #ReCaptcha with Ajax Form in MVC3?

I am trying to use ReCaptcha from Microsoft.Web.Helpers. If I load the entire page it renders correctly, but if I load the page with an ajax request it disappears.
Example (/home/index)
<div id="bla">
#Ajax.ActionLink("reload with ajax", "index", new AjaxOptions() { UpdateTargetId = "bla" })
#ReCaptcha.GetHtml(publicKey: "xxx")
</div>
If I enter /home/index the captcha appears. If I click the button reload with ajax the ReCaptcha disappears...
The page is loaded for the first time
reload with ajax was clicked, the contents of the page change to /home/index, in other words, the entire page reloaded asynchronous and the captcha is gone
Is there a way to fix this or a decent captcha helper for MVC 3?

I've replaced the helper with javascript. ReCaptcha script
<div id="captcha"></div>
<input type="submit" value="Send" />
<script type="text/javascript">
Recaptcha.destroy();
Recaptcha.create("publicKey", "captcha", {});
</script>
And the Controller is still the same
if (ReCaptcha.Validate("privateKey"))
{
}
So when it loads the view partially it executes this scripts and render correctly every time.
Thanks for the help #Bala R

I faced the same issue and the quickest solution i found is using what it is proposed above and add to it this part of code in the top of your page within the handler "EndRequestHandler" proposed by the .net javascript api ( http://msdn.microsoft.com/en-us/library/bb311028(v=vs.100)).
With this solution the backend validation always works.
Here is the code I've used :
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (Recaptcha != null) {
Recaptcha.destroy();
Recaptcha.create("public_key", "captcha", {});
}
}
</script>
I hope this could help someone...

C# ASP.NET MVC AJAX Login Form

I am using the MVC Ajax.BeginForm("LogOn", "Account", new AjaxOptions { UpdateTargetId="updateajax" }) <div id=updateajax/> so it only updates to that area. The login form is the ajax.beginform. But can you cancel the AjaxRequest inside the controller. What I wanted is that when I am loggin in the ajax, it will only update the validations but when the login is successful I want the whole page to redirect or update again. In my controller I return the entire page when the login is successful but that put the whole content inside the updateajax div. What can I do to solve this problem? I just want to stop the ajax call when the login is successful.

You sort of have to either redirect or update the whole body of the page.
Or you can wrap the whole body content in a div and ajax update that one. My suggestion is to go ahead and redirect, because if you have scripts that run on load, you would have to manually call them.
<body>
<div id="ajaxUpdatedPanel">
<% using (Ajax.BeginForm("LogOn", "Account", new AjaxOptions {
UpdateTargetId="ajaxUpdatedPanel",
OnSuccess = "redirectTo" }) { %>
....
....
<script type="text/javascript">
function redirectTo() {
window.location = "your_redirect_url";
}
</script>
<div>
</body>