MVC traditional form action not calling controller method

Question

I am aware this topic has been in many developers' interest and has been talked about in many forums, but I haven't been able to find the right answer that quite solves my issue. Perhaps I haven't tried hard enough to seek the answer, in which case it would be nice if you fellow developers could let me know of any useful forums.

The issue that I am having is simply the traditional HTML action not calling the controller ActionResult method.

I have a partial view called "_Form.cshtml" as follows:

<_Form.cshtml>

<form action="@Url.Action("Temp_Form", "Product")" method="post" class="k-content" id="tempForm">
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()
    <fieldset>
    <p class="lead">Please fill in the following form.</p>
    <br />

    <div class="form-horizontal">
        <div class="form-group">
            @Html.Label("Brand", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @(Html.Kendo().DropDownList()
                .Name("ddlBrand")
                .OptionLabel("--- Select ---")
                .HtmlAttributes(new { id = "brand", required = "required", data_required_msg = "Select Brand", @class = "form-control" })
                .DataTextField("Name")
                .DataValueField("Id")
                .BindTo(Products.ProductBrandCollection.LoadAll())
                )
                <span class="k-invalid-msg" data-for="ddlBrand"></span>
            </div>
        </div>
        <div class="form-group">
            @Html.Label("Range", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @(Html.Kendo().TextBox()
                .Name("tbRange")
                .HtmlAttributes(new { required = "required", validationmessage = "Enter Range" })
                )
                <span class="k-invalid-msg" data-for="tbRange"></span>
            </div>
        </div>
    </div>

    <div id="buttondiv">
        <div class="column">
            <div class="vis" id="submitbutton">
                @(Html.Kendo().Button()
                .Name("btnSubmit")
                .HtmlAttributes(new { type = "submit", @class = "button-next" })
                .Icon("arrowhead-e")
                .Content("SUBMIT")
                .Events(e => e.Click("submit"))
                )
            </div>
        </div>
    </div>
    </fieldset>
</form>

In the main view "Product.cshtml", I have the following javascript click event for submit button:

function submit(e) {
    // handles hiding and showing divs
}

Here is my ActionResult "Temp_Form", which is in "ProductController.cs":

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Temp_Form(string ddlBrand, string tbRange)
{
    TempData["brand"] = ddlBrand;
    TempData["range"] = tbRange;
    return Content("");
}

I am sussing it is either "@Url.Action("ActionMethod", "Controller")" <- this part not being correctly formatted or having both "type="submit" and ".Events(e => e.Click("submit"))" for the submit button.

**For a reason, I am not using Html.BeginForm() to call the controller method. So my option is to use the traditional form to pass data from the view to controller with submit button.

I have also tried..

<form action="myController/myAction" method="POST">

the above format but my ActionResult is still not called.

I don't think my main view is causing the ActionResult not to fire since it only has two cascaded DropDownLists that selects a correct form on the client side.

Could someone please identify what I'm doing wrong or advice me with alternatives? As I mentioned above, I am not by any chance using Html.BeginForm() simply because I have those Telerik Kendo Validations that seem to work with only the traditional form..

Many thanks in advance!

Answer 1

The issue is you are handling the Submit of the form with a JavaScript event...

So if you want to keep your JS event for your submit button click you need to use Ajax call from your JS method to do the POST to the action, something like:

$.ajax({
    url: '/Product/Temp_Form',
    data: $('#tempForm').serialize(),
    type: 'POST',
});

Answer 2

You are using Razor syntax so do not use form tag directly, use Html.BeginForm() as below.

@using(Html.BeginForm("Temp_Form", "Product", FormMethod.Post, new {@class = "k-content", @id="tempForm" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()
    <fieldset>
        //your HTML here
    </fieldset>
}

Also if possible use strongly typed models instead of loose string properties like ddlBrand and tbRange.