Thursday, 6 February 2014

Upload file using Ajax form and Modal dialog in ASP.Net MVC

12 comments:

Raja sekar said...

thanks for the code boss....

Jesús Sánchez said...

Hello

Excellent article, but I have a big problem: how to make the validation within the modal dialog?. I need to show the model System.ComponenModel.DataAnnotations and other custom messages, can you help me?

Rohit Kesharwani said...

yes. You can add validation such as Required, Length of String, Regular Expression, by using System.ComponenModel.DataAnnotations and check in your post method whether ModelState.IsValid or not or any other custom validation, if valid then only perform your operation.

Jesús Sánchez said...

How do I change the App so that it provides for Validation??
I guess you'll have to do something so...

public ActionResult Create(HttpPostedFileBase imageFile, Actor model, string cmd)
{
if (ModelState.IsValid)
{
..... What should I put here so that it shows the partial view with the validation errors???
}
}

Thanks

Rohit Kesharwani said...

Server side modification:

bool success = false;
string message = "Model State is not valid!";

if (ModelState.IsValid)
{
success = true;
message = "Model State is valid!";

// to do
}

return Json(new { success = success, message = message }, "application/json", JsonRequestBehavior.AllowGet);


Client side modification:

$('#frmCreateActor').ajaxForm(function (response) {

if (!response.success) {
alert(response.message);
return;
}

$('#modalDialog').dialog("close");
})

Hope this help.

Jesús Sánchez said...

In that view I put...

$('#frmCreateActor').ajaxForm(function (response) {

if (!response.success) {
alert(response.message);
return;
}

$('#modalDialog').dialog("close");
})

In _Actor.cshtml and _ActorList.cshtml i have error in runtime JavaScript: the object don´t accept the property or method 'ajaxForm' ....

Help Me!!!

Rohit Kesharwani said...


Please check whether you have added this mentioned file or not:
script src="@Url.Content("~/Scripts/form_ajax.js")"

and
in _Actor.cshtml, the complete script code is given below:
script
$(document).ready(function () {
$('#frmCreateActor').ajaxForm(function (response) {

if (!response.success) {
alert(response.message);
return;
}

$('#modalDialog').dialog("close");

$.post('@Url.Action("GetActorList", "Home")', function (data) {
$("#actorList").html(data);
});
})
});
script

The complete script tag is not allowed in comment box thats why I had not created script tag properly. Please correct it in your code.

Jesús Sánchez said...

Hello
It can be that you found the problem. The file form_ajax.js download it from somewhere and it seems that it is not correct, where can I find this file?
Thank you

Rohit Kesharwani said...

Ok.Please send me your email is so that I can send you form_ajax.js file.

Rohit Kesharwani said...

Download complete source code from the given location(s):

https://onedrive.live.com/embed?cid=A9F5007CD218E84F&resid=A9F5007CD218E84F%21118&authkey=ACn6RK2yxq6C_FM

https://onedrive.live.com/?cid=a9f5007cd218e84f&id=A9F5007CD218E84F%21118&authkey=!ACn6RK2yxq6C_FM

Phục Trương Quang said...

Where is ajax_form.js?

Rohit Kesharwani said...

You can download complete source code along with the files from the given location:

https://onedrive.live.com/?cid=a9f5007cd218e84f&id=A9F5007CD218E84F%21118&authkey=!ACn6RK2yxq6C_FM