CODEWITHSUNDEEP
formsjquery-mobilerazorasp.net-mvc-4submit
chin
chin

Reputation: 111

MVC 4 Razor + jquery mobile can't "POST" on form submit

I'm new to ASP.NET MVC 4, I'm trying to create a simple login form on jquery mobile. I would like to create a simple jquerymobile MVC 4 page with Razor, where the page will "POST" when the user click submit.

But every time i click the "Login" button (which is the submit button), it keeps going to the "GET" action in my controller.

And firebug also showing the request as "GET", please give help to give me some guidance on what I did wrong. :(

Below are my codes, Thank you in advance.

My View

@model com.mywebsite.Models.LoginModel

<div data-role="page" data-theme="a" id="main">
            <div data-role="header" id="topbar" data-theme="b">
                <a href="index.html" class="back" data-direction="reverse"></a>
                <div class="header_title">Login</div>
            </div>

  <div data-role="content" data-theme="e"  id="content">
@using (Html.BeginForm("Login", "User", FormMethod.Post, new Dictionary<string,Object> { {"enctype","multipart/form-data"}, {"data-ajax","false"}}))
{
    @Html.ValidationSummary(true, "Login failed. Check your login details.");    

    <fieldset>    
    <div class="container1 " >
    <div class="fblogin"></div>
    <div class="or">Or</div>
  <div class="container1_1">
  <legend>Login</legend>
        <div  class="textwrapper grid">
            <div class="leftcolumn"><label for="name">Email:</label></div>
            <div class="leftcolumn">                
                @Html.TextBoxFor(u => u.UserName, new Dictionary<string,Object> { {"data-theme","d"}, {"id","e"}, {"type","email"}, {"size","20"}})

            </div>
        </div>
     </div>   
        <div  class="textwrapper container1_1">
            <div class="leftcolumn"><label for="password">Password:</label></div>
            <div class="leftcolumn">
                @Html.PasswordFor(u => u.Password, new Dictionary<string,Object> { {"data-theme","d"}, {"id","p"}, {"type","password"}})
            </div>
        </div>    
    </div>   
    <input type="submit" value="Log In" rel="external" data-ajax="false" />

  <div class="fpwd"><a href="index.html" data-theme="d">Forgot Password?</a></div>
  <div class="container1">
          <div class="container1_1">
        <legend>Don't have an account yet?</legend>
        <ul data-role="listview" data-inset="true" data-theme="d" class="nopadding">
        <li ><a href="signup.html"><div class="icon_signup_list"></div>Register</a></li>
        </ul>
        </div>
  </div>
        </fieldset>
}  
<!-- end content-->
</div>

@Html.Partial("~/Views/Shared/_Footer.cshtml")
<!--end page-->
</div>

My Model (The same as the default MVC Application template) 

public class LoginModel
{
    [Required]
    [Display(Name = "User name")]
    public string UserName { get; set; }

    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [Display(Name = "Remember me?")]
    public bool RememberMe { get; set; }
}

My Controller

public class UserController : Controller
{        
    // GET: /User/
    public ActionResult Login(string returnUrl)
    {
        return View();
    }

    // POST: /User/Login/
   [HttpPost]
    public ActionResult Login(LoginModel user)
    {
        var obj = UserModels.GetUser(user.UserName, user.Password);
        return View();
    }
 }

My Global.asax.cs

    public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();

        WebApiConfig.Register(GlobalConfiguration.Configuration);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);
        AuthConfig.RegisterAuth();


    }

    protected void Application_BeginRequest()
    {
        const string culture = "id";
        CultureInfo ci = CultureInfo.GetCultureInfo(culture);

        Thread.CurrentThread.CurrentCulture = ci;
        Thread.CurrentThread.CurrentUICulture = ci;
    }
}

Upvotes: 1

Views: 3617

Answers (2)

chin
chin

Reputation: 111

Found the silly mistake to my misery for the pass few days.

Removed the tag on my _Layout and it worked.

Thank you @onemancat for your replies, it hint me to look at other areas.

Upvotes: 0

J.T. Taylor
J.T. Taylor

Reputation: 4277

You have nested form tags:

@using (Html.BeginForm("Login", "User", FormMethod.Post, new Dictionary<string,Object> { {"enctype","multipart/form-data"}, {"data-ajax","false"}}))

and

<form action="/User/Login" method="post" data-ajax="false">

Both of these lines of code produce a tag. Nested tags are illegal in HTML 4+. Please remove one of the form tags, that should fix the problem.

Upvotes: 3

Related Questions