நெஞ்சே எழு!

Returning a partial view on a MVC Ajax Form submit

In my previous post we talked about returning a Json object on a MVC Ajax form submit. There we had to write several Java-Script methods in order to process the response. In that case it was just about whether are registration (form1) was successful or not. But assume we need to show another form (form2) (without redirection), do some data filling there and submit it and that all these things have to be in Ajax.

One way you could achieve this, is to have both these forms in our html page and do a jquery show  and a hide on those forms. below given is the javascript code if are implementing this in our previous example.

function RegisterSuccess(data) {
    try {   
        if (data.Status == "0") {          
            $('#form1').hide();
            $('#form2').show();          
        } else {           
            $(".msg").addClass('error');
            $(".msg").html(data.Message);
        }
    } catch (e) {
    }
}

If we need to auto fill up some of the information in form2 from the database, we need to write javascript code to set the values for each of those fields. I remeber Scott Hanselman , saying "People who can read java-scripts are weird people!" (people who write too!) in one of this videos. So what if a js library writes all these javascripts for us and that we only need to return a view. Yes, Ajax.BeginForm takes care of all that. You just need to set the UpdateTargetId and the LoadingElementId parameters.

Ok now. Time for some coding! This is how are razor view look like.

@model AjaxMvc4.Models.RegisterModel
@{
    ViewBag.Title = "Register";
}

    
@ViewBag.Title.
    
Create a new account.


    loading...


    @using (Ajax.BeginForm("Register", "Account", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "formContent", LoadingElementId = "loader" }))
    {  
        @Html.AntiForgeryToken()
        @Html.ValidationSummary()    
        

            
Registration Form
            

                

                    @Html.LabelFor(m => m.UserName)
                    @Html.TextBoxFor(m => m.UserName)
                
                

                    @Html.LabelFor(m => m.Password)
                    @Html.PasswordFor(m => m.Password)
                
                

                    @Html.LabelFor(m => m.ConfirmPassword)
                    @Html.PasswordFor(m => m.ConfirmPassword)
                
            
            
        
    
    }

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

In the controllers instead of returning a Json object we return a partial view. We can even pass a model and set if we need to fill some of the information in the new form (either from the database or from the previous model posted).

        [HttpPost]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public ActionResult Register(RegisterModel model)
        {
            if (ModelState.IsValid)
            {
                // Attempt to register the user
                try
                {
                    WebSecurity.CreateUserAndAccount(model.UserName, model.Password);
                    WebSecurity.Login(model.UserName, model.Password);

                    UserModel user = new UserModel();
                    user.UserName = model.UserName;

                    return PartialView("_UserContactDetailsPartial", user);               
                }
                catch (MembershipCreateUserException e)
                {                   
                    ModelState.AddModelError("", ErrorCodeToString(e.StatusCode));
                }
            }
            return PartialView("_ErrorPartial");    
        }

User Details Partial View :

@model AjaxMvc4.Models.UserModel





@using (Ajax.BeginForm("Account", "ContactInformation", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "formContent", LoadingElementId = "loader" }))
{
    @Html.ValidationSummary(true)

    

        
Contact Details

        

            User Name
        
        

            @Html.DisplayFor(model => model.UserName)
            @Html.HiddenFor(model => model.UserName)
        

        

            First Name
        
        

            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        

        

            Last Name
        
        

            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        

        

            Email Address
        
        

            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        

        

            Phone Number
        
        

            @Html.EditorFor(model => model.PhoneNo)
            @Html.ValidationMessageFor(model => model.PhoneNo)
        

        

            Mobile Number
        
        

            @Html.EditorFor(model => model.Mobile)
            @Html.ValidationMessageFor(model => model.Mobile)
        

        

            Address
        
        

            @Html.EditorFor(model => model.Address)
            @Html.ValidationMessageFor(model => model.Address)
        

        

            
        
    
}

Don't forget to reference the jquery.validate.min.js and jquery.validate.unobtrusive.min.js for your ajax form to work!

Simple asp.net MVC Ajax Form Application

For this purpose, I'm using Microsoft asp.net MVC4 application.

Step1. As always, add a new project (Not an empty web project).

 Step2. Choose Internet Application from the project template.

Step3. As it is not an empty web project, there will be a set of code generated for you. For example the log in and the registration modules (Models, Controllers and Views). We are planning to alter them into Ajax forms.

Step4. Ok now, lets do some coding. We'll try to change the registration module. Go to register.cshtml in the Account folder inside the Views folder. Instead of the normal Html.BeginForm , change that to Ajax.BeginForm.

There are some slight changes you need to make when it comes to Ajax.BeginForm method.  You need to provide the HttpMethod and some Java-script functions as AjaxOptions other than controller and the action name. I have provided Java script methods for OnBegin, OnSuccess, OnComplete and OnFailure events. (Check Step 6 for JS implementaions)

Step5. We also need to change the controller, since we are planning to return Json Objects so that we can process them in are Java scripts. I have made the return type as "JsonResult" instead of "ActionResult". ActionResult Class is parent class of JsonResult Class. However, I have opted for JsonResult so that I can be more specific (Register action will only return Jsons). Although, inside my "Register" action the registration process is the same, instead of doing a return View(), I do a return Json(). I need to process this Json at client side, according to the format I specify here. Here I'm simply returning a Status and a Message in my Json.

Step6. Now that we have written the code to send an ajax request and process it in the server side, we now need to handle the response in the client side. Below shown are my Java Script method implementations mentioned in step4. In my RegisterBegin() and RegisterComplete() methods I'm just showing and hiding a progress bar. RegisterFailure() method (called by OnFailure event) prompts for error with the HttpStatus Code. Note that this method gets fired only  for Http errors. Not for our application errors. We need to handle our application errors within the RegisterSuccess() method as they also get return with  http status success 200 (which triggers the OnSuccess event).

In our RegisterSuccess() method we differentiate the success registration and errors in registration based on the Status codes in our Json Object (Check Controller Code). If success, we are redirecting to the home page and if not we are showing the error message passed from the controller via the json object.

Step7. We are ready to launch now. Run the application and start registering. You will see a progress bar once you click on the submit button, and the success message on a successful registration. Try some exception scenarios as well! Good Luck!

Back to NLP!

guys,
I'm planning to do some work on Natural Language Processing work in the coming months. My last work on NLP was a Morphological Analyzer almost 2 years back! (A Tamil Morphological Analyzer and Generator) I think it's a good start for me to go on with what I love, and lets see what happens in the future!

I just thought of sharing today a presentation I did for my university mates in which I presented the paper "Arabic Morphology Using Only Finite State Operations" written by Mr. Kenneth R Beesley.Cheers!
 

Arabic Morphology Using Only Finite State Operations -Review from Lushanthan

Lukka Chuppi...

Yesterday was a terrible day  for me guys! listening to "Lukka Chuppi" now (Of course, songs have been my mood-fixer). Enjoy! and this is my first post via blogger mobile. :-)

Getting Started with Microsoft Entity Framework

I have been working with Microsoft Entity Framework for more than a year now. It's cool! Recently I got a chance to do a session to my office mates on "Getting started with Microsoft Entity Framework" at the weekly office tech talk presentations. I have uploaded them on slide-share. If it gets too much time too load visit either http://www.slideshare.net/slideshow/embed_code/12726298 or http://www.slideshare.net/lushanthan/getting-started-with-entity-framework

Getting started with entity framework

View more PowerPoint from Lushanthan

Cross domain policy for silverlight to access a WCF Service

Today, I'm posting about an issue which I faced when making a WCF Service to be accessible across different domains. And this was for a silver-light chat application. The chat application didn't work for me, and it threw me the below error when I debugged.

"An error occurred while trying to make a request to URI http://SampleSite/Chat Service.svc. This could be due to attempting to access a service in a cross-domain way without a proper cross-domain policy in place, or a policy that is unsuitable for SOAP services. You may need to contact the owner of the service to publish a cross-domain policy file and to ensure it allows SOAP-related HTTP headers to be sent. This error may also be caused by using internal types in the web service proxy without using the InternalsVisibleToAttribute attribute. Please see the inner exception for more details."

After going through the MSDN, I was able to solve the issue.

"To enable a Silverlight control to access a service in another domain, the service must explicitly opt-in to allow cross-domain access. By opting-in, a service states that the operations it exposes can safely be invoked by a Silverlight control, without potentially damaging consequences to the data that the service stores.

Silverlight 4 supports two different mechanisms for services to opt-in to cross-domain access:

• Place a clientaccesspolicy.xml file at the root of the domain where the service is hosted to configure the service to allow cross-domain access.
  
  
• Place a valid crossdomain.xml file at the root of the domain where the service is hosted. The file must mark the entire domain public. Silverlight supports a subset of the crossdomain.xml schema. "

                                                                                                                      - MSDN [1]

This is even clear when you use the nikhilk's Web development helper with ie( can view request, response details) and check out the request [2] (check video) . It searches for those two files.

 
Here are the two files that are needed.
 
clientaccesspolicy.xml  

<?xml version="1.0" encoding="utf-8"?>

<access-policy>

  <cross-domain-access>

    <policy>

      <allow-from http-request-headers="SOAPAction">

        <domain uri="*"/>

      </allow-from>

      <grant-to>

        <resource path="/" include-subpaths="true"/>

      </grant-to>

    </policy>

  </cross-domain-access>

</access-policy>

crossdomain.xml

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
  <allow-http-request-headers-from domain="*" headers="SOAPAction,Content-Type"/>
</cross-domain-policy>

Save both these files to the root of the domain where the service is hosted. If, for example, the service is hosted in http://fabrikam.com, then the file must be located at http://fabrikam.com/crossdomain.xml. Thanks to MSDN!


References

[1] http://msdn.microsoft.com/en-us/library/cc197955%28v=vs.95%29.aspx

[2]http://www.silverlight.net/learn/data-networking/introduction-to-data-and-networking/how-to-use-cross-domain-policy-files-with-silverlight

Check out the above video [2]  by Tim Heuer . It was really helpful!!!