We Keep Coding

Asynchronous call triggered by leaving textbox

So, I'd like to avoid using jquery directly, I want to use Ajax.BeginForm instead. My problem is that I need the ajax part executing upon leaving a textbox field instead of hitting the submit button. Is that possible, or I have to use jquery functions in this case? (If so, where should I start learning about it?)

just put an id tag on your textbox and use:
$( "#textboxID" ).blur(function() {
alert( "Handler for .blur() called." );
});

MVC button sending parameters from JS

So I have a panel with 3 DDL, 2 TextBoxes, a Cancel button and an Apply button. I want my button work this way:
When I click it, I want it to take the data from 3 DDL and 2 TextBoxes and build a model, send it to my controller/function and refresh the gridview .
But the function also has to check there is no duplicate entries.
So if that function returns a partial view, in case the entry I am adding is duplicated, how can I show a message to display the error?
button:
<button id="btnAddUpdateConfig" name="btnAddUpdateConfig" value="Apply" onclick="ValidateValues()">Apply</button>
My problem also comes before that; how can I send the values to the controller function? Is there a way to call a controller method passing values from the button?
But that method will have to refresh the gridview if the item is added or show and error if it is not.
If I want to do it from JS, how can I do the same?
I just know Ajax.ActionLink and that creates a link when I just want to call a controller method.

how can I send the values to the controller function? Is there a way to call a controller method passing values from the button?
Use jquery ajax call:
function ValidateValues(){
actionUrl=#Url.Actio("ControllerName","Action",new {param1=value,param2=value=param3=value})
$.ajax({
url:actionUrl,
statusCode: {
404: function() {
alert("Data is duplicated");
}
}
});
}
Now you can handle request in your action and if data is duplicate send the following code:
return new HttpStatusCodeResult(404, "Data is duplicated");

Is it possible to kick off a javascript function after a partial view renders in MVC Asp.net?

Let me preface this question with the fact that I am very new to MVC.
I have an instance where I am rendering a devexpress grid in a partial view.
#Html.Partial("MyGridPartial", Model)
I need to kick off a javascript function at the moment that the model has been populated via this partial view render. I attempted to do this via this. :
settings.ClientSideEvents.EndCallback
I can get to this point, but at that time I do not have the model itself populated so it does no good. I was wondering if anyone is aware of a generic way of kicking/attaching to a partial view render in order to jump into some clientside javascript code.

If it's a PartialView you're rendering in a View on the serverthen Dave's method would work best. Simply wire-up your code to the DOM ready event.
$(document).ready(function(){
//Javascript logic to fire goes here
});
or if you prever the shorthand version...
$(function(){
//Javascript logic to fire goes here
});
If you're rendering a partial view that is being loaded via Ajax then the same method will work. jQuery will run javascript in the html passed back to the client via Ajax once it's attached to the DOM if I recall correctly (feel free to test this I'm just going by memory about it firing once attached to the DOM, but I believe this is a feature of the load() method), assuming the javascript you want to run is in the response. If it's in the parent page sending the Ajax request then you're best bet is to hook it up to the complete event. (I'm populating the parameter on the client side here)
$("#wrapperAwaitingContent").load("/Grids/MyGridPartial", {id: null /*parameters*/}, function(text, status, xhr){
//Javascript logic to fire goes here
});
For me the url used in the .load() call is resolved using the UrlHelper on the server
$("#wrapperAwaitingContent").load("#Url.Action("MyGridPartial", "Grids")", {id: null /*parameters*/}, function(text, status, xhr){
//Javascript logic to fire goes here
});
You also have the option of doing something similar to this using Unobtrusive Ajax. (I'm populating the parameter on the server side here)
#Ajax.ActionLink("Load Data", "MyGridPartial", "Grids", new { id = null/*parameters*/ }, new AjaxOptions() { UpdateTargetId = "wrapperAwaitingContent", OnComplete="onCompleteMethodName" })
There are more properties you can set for the AjaxOptions other than the element to receive the HTML and the method to call when it's finished but I find I'll reuse functions defined in a shared javascript file and populate them only if they are not already populated from there, something like this...
$("a[data-ajax='true']").each(function () {
var ajaxUpdate = $(this).closest("data-ajax-container");
$(this).attr("data-ajax-update", $(this).attr("data-ajax-update") ? $(this).attr("data-ajax-update") : ajaxUpdate);
$(this).attr("data-ajax-mode", $(this).attr("data-ajax-mode") ? $(this).attr("data-ajax-mode") : "replace");
$(this).attr("data-ajax-success", $(this).attr("data-ajax-success") ? $(this).attr("data-ajax-success") : "AjaxSuccess");
$(this).attr("data-ajax-complete", $(this).attr("data-ajax-complete") ? $(this).attr("data-ajax-complete") : "AjaxComplete");
$(this).attr("data-ajax-failure", $(this).attr("data-ajax-error") ? $(this).attr("data-ajax-error") : "AjaxError");
});

If you are rendering this partial as part of the normal flow of a View being rendered, the answer is NO.
Reason for this is the Partial is converted into a string before the parent View is even rendered. At that point, none of your markup has been seen by the browser, no jscript has been read.
If, on the other hand, you rendered the partial in your JQuery Ready function:
$(document).ready(function() {
I think you would need to use an Action Partial (Partial that gets called by an action method). Action Partials can be called within your JQuery Ready function by referencing the url (restfully):
$('#divMyGridPartial').load('/Grids/MyGridPartial/{id}');
and any follow up jscript/jquery functions can be called within the ready series.
The other advantage of an Action Partial, the Model is formed within the action method and can be created contextually to what you need (ideally hinging off an id passed).

Updating the view with the new data in the viewmodel in MVC3, C#

I have ajax call of action in the controller, after it update the database and it is completed successfully I can do like this:
return PartialView("Overview", mydatamodel);
and then in the the success to do like this:
success: function (data) {
// do something with the data => refresh some
// portion of your DOM
$('#someDivId').html(data);
}
And it would work fine, but what I need is that a collection in the view model to be updated, and the whole view to be rendered again with the new data.
I can do that if for instance I have submit button, then whole view is updated with the new data but if I have ajax call, how can i do that.
Here is link to my previous post where have more details:
MVC3 receiving the new model data after submit
Thank you in advance!

If you want to update the entire view don't use AJAX. Simply use a submit button. The whole point of AJAX is to update only a portion of the view without navigating away from the current page.
By the way you could redirect on the client side using window.location.href:
success: function (data) {
window.location.href = '#Url.Action("Overview", "SomeController")';
}
but there's really no need to do that if you will always redirect in the success AJAX callback. You should not use AJAX in this scenario.

You usually use AJAX precisely for the situations where you only want a portion of the view to be updated after the request completion.
If you, for some reason, need to use AJAX even for such cases (e.g. using a DELETE HTTP verb to send the request), you might do something like
window.location.href = '/Items/123';
in your success callback function, which effectively triggers a full page update.

Jquery popup on mouse over of calendar control

I am using the Calendar control of ASP.NET. I need to display a pop-up form when I hover over a particular date in the Calendar control. This pop-up should display data from database.
Does anyone have a solution for this?

You should have an empty div:
<div id="popup"></div>
then bind an event to the calendar elements:
('li.calendar').hover(function(){
//make an ajax call and populate the popup div with the data
//easiest method is jquery.load(), but if you need more control use jquery.ajax();
$("popup").load('path/to/page.asp',data,function(){
$("popup").show();
});
});
Look at jquery.load() and jquery.ajax()

I dont know how asp name the date spans, check it, its very easy to detect
after getting the selector
user jQuery to add the event
jQuery('selector').hover(function(){ //or use mousemove
getPopup(jQuery(this).text()); // just send any data to detect the date
}) ;
after that you'll need to make an AJAX request in the getPopup function
you may use
jQuery.get()//or jQuery.post()
__doPostBack()//if you have update panels
//or any ajax technique xmlhttprequest,PM,...
in the response of the ajax request just draw the popup ...
hope this helps
examle getPopup function
function getPopup(date/*for example*/){
jQuery.getScript('www.myWebsite.com/pageThatDrawsThePopup?date='+date);
// getScript assuming that the return value is JS code the immediately draws the popup
// ?date = date assuming that your page takes the date as query string and get the data from the database upon this field
//dont forget to change the url
//very simple very easy ...
}

Add a CSS class to the cell containing the date that should trigger the popup. You'll need to override the DayRender event to do this.
void myCalendar_DayRender(object sender, DayRenderEventArgs e)
{
if (e.Day.Date.Day.ToString().EndsWith("7")){// Replace with your own condition
e.Cell.CssClass+= "specialCell"; //replace with your own custom css class name
}
}
Then add some JavaScript (or Jquery) to trigger the pop-up. The JQuery ajax functions provide the easiest way to get your data and populate the pop-up as per #user1225246's answer.
$(document).ready(function(){
$('.specialCell').hover(function(){
function(){//This will get called when you mouseover
alert('put your JQuery AJAX code here.');
},
function(){
alert('do any clean-up (e.g. hiding the popup if you need to) here.');
}
});