Submit a form using asp.net MVC

Ok well..there a lot of ways on how to submit your forms depending on your needs.
I'm gonna show few of those..and its up to you what you gonna used.

The normal way of submitting forms.

Views File (Register.aspx)

 <% using (Html.BeginForm()) { %>
        

            

                
Account Information
                

                    Username:
                    <%= Html.TextBox("username") %>
                
                // more code in here
              
            
        
    <% } %>

Controller File (Home.cs)

 [AcceptVerbs(HttpVerbs.Post)]
 public ActionResult Register(string username,...)
        {

            if (string.IsNullOrEmpty(username))
            {
                return View();
            }
            // more code in here for checking
        }

Submit a form using Javascript

   <% using (Html.BeginForm(null, null, FormMethod.Post, new { id="myForm"})) 
      { %>
          //code here
   <% } %> 

and then:

 $("#myForm").submit(); 

and do not forget to include jquery-1.2.6.js that comes with mvc (or use a higher version).
The Home.cs file is same as the above code.

If you want to do a client side checking before submitting your data on the server..you have to do the more complex way.

   
  <% using (Html.BeginForm("Register", "Home", FormMethod.Post, new { id="myForm", onsubmit="return !stopThis();", enctype="multipart/form-data" }))
            {%>
              //code here
         <% } %>

and then:

   
  function stopThis() {
   //Mandatory fuction where u can check all ur data if it was all correct and fill up
   if (Mandatory()) {
    // let say we have a notification element name notify_msg
    document.getElementById('notify_msg').innerHTML = 'Pls. Fill up all the Required Fields'; 
    return true;
   }
   return false;  // require fields are all correct
  }

Home.cs

   
  public ActionResult SubmitCareerForm(FormCollection frm)
        {
         // no more checking on the field
        // code here 
        }

Take a look on the Home.cs file, see the [AcceptVerbs(HttpVerbs.Post)] it was removed on the last sample. No need for that since we are already
pointing the funtion on the Home file using (Html.BeginForm("Register", "Home",.....

Theres also an elegant way to ajaxify you forms (with jquery) . Never try that one though.

ciao.

Read More...

To use onchange event of dropdownlist on asp.net MVC

Lots of us are still learning the MVC framework. Some are facing difficulties on how to interact the controller and the views. Probably one of the common problems we encounter was dealing with the dropdownlist. In a scenario that you will be having two dropdownlist linking to each other
(dropdown A and dropdown B). And on the onchange event of the dropdown A another set of values will be loaded on the dropdown B.

You don’t want to post the form containing the two dropdown lists back to the server each and every time a user selects a new value from dropdown A. That would create a really bad user experience. Instead, you want to update the list of dropdown B after a new value of dropdown A is selected without a form post.


so probably you be needed cascading drop-downs.

A good sample.

-87
Read More...

Customize reCaptcha, remove theme. ASP.net

It was my first time to use reCaptcha, and i found out that there is a default theme plugin to it, where all i need to get is just the image, with the link reload captcha and link to play audio, similar to the facebook and twitter. Set the reCaptcha theme to "clean" ( theme: 'clean' ) still looks bad. And it took me a while to configure the API inorder to blend in and work good to the website we have.

Well, custom theming API allows you to do the same thing that Facebook has done. Unfortunately, this customization can't be done without javascript.

In order to use custom theming, you must first set the theme property of the RecaptchaOptions to 'custom'. This tells reCAPTCHA that it should not create a user interface of its own. reCAPTCHA will rely on the presence of HTML elements with the following IDs to display the CAPTCHA to the user:

* An empty div with ID recaptcha_image. This is where the actual image will be placed. The div will be 300x57 pixels.
* A text input with ID and name both set to recaptcha_response_field. This is where the user can enter their answer.
* Optionally, a div which contains the entire reCAPTCHA widget. This ID div should be placed into the custom_theme_widget and the style of the div should be set to display:none. After the reCAPTCHA theming code has fully loaded, it will make the div visible. This element avoids making the page flicker while it loads.

Note: dont forget to export the recaptcha.js before the above code.

On the page you will have this html code:

Incorrect please try again





  
   

     <%--an empty div with ID recaptcha_image --%>
    
 
   
    

     Get another CAPTCHA
     Get an audio CAPTCHA 
     
  
 
<%--a text input with ID and name both set to recaptcha_response_field --%>
 

So its kinda look like this( is use asp.net MVC ):




Have this script also to check if the inputed text is same as the image recaptcha that generated.

$(function() {
         $('#submitLink').click(function() {
             $.ajax({
                 type: "POST",
                 url: "/Home/isCaptchaValid",
                 async: false,
                 data: { "challenge": Recaptcha.get_challenge(), "response": Recaptcha.get_response() },
                 success: function(data) {
                     alert(data);
                 },
                 error: function() { alert('error'); }
             });
         });
     });

Take a look at the URL i call it will go on the HOME controller (as i used the MVC). The code behind for this application:

//be reminded that i use ASP.net MVC
//it will return a JSON boolean.

[AcceptVerbs(HttpVerbs.Post)]
      public bool isCaptchaValid(string challenge,string response)
      {

             // Add your operation implementation here
          Recaptcha.RecaptchaValidator validator = new Recaptcha.RecaptchaValidator
          {
              PrivateKey = "6LcouQcAAAAAAOjcmhymXE9M7jTHAmV9VsIm1UFy",
              RemoteIP=Request.UserHostAddress,
              Challenge=challenge,
              Response=response
        
          };
          Recaptcha.RecaptchaResponse Cresponse = validator.Validate();
          return Cresponse.IsValid;
      }

The parameters Recaptcha.get_challenge() and Recaptcha.get_response() are the helper functions that return the reCAPTCHA challenge string and the response that the user has typed in to the response field. They return null if the widget isn't showing. Can be used with the AJAX API to retrieve the answers so that an XMLHttpRequest can be used to post the reCAPTCHA solution.

View the demo.

For more info visit: ASP.NET CAPTCHA Library for reCAPTCHA


ciao

Read More...