Unable to submit form data using Ajax.ActionLink inside a twitter bootstrap button dropdown

Question!

I'm attempting to submit a search request (SEGQuery) that will search a specific field based on what the user selects from the twitter bootstrap button dropdown (SearchField). The SearchField is saved in the query string and I have no issue in retrieving that. However, when I attempt to post the SEGQuery, it's not being posted into my Action Method and I have no idea why. I'm attempting to use the Ajax.ActionLink helper rather than a button because I want to be able to maintain the look of the twitter bootstrap dropdown button.

Another issue I'm having is that even though the Action method is hit, it doesn't redirect to the SearchResults view like it should.

Is there something obvious I'm doing wrong that is preventing my model data from posting correctly?

View

@using (Html.BeginForm("SearchResults", "SEG", FormMethod.Post))
{
<div class="seg-search">
    <div class="input-append">
        @Html.TextBoxFor(m => m.SEGQuery, new {@class = "input-large-seg"})
        <div class="btn-group">
            <button class="btn dropdown-toggle" data-toggle="dropdown">
                Search
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li>@Ajax.ActionLink("Company Name", "SearchResults", new {fieldId = 1}, new AjaxOptions{HttpMethod = "POST"})</li>
                <li>@Ajax.ActionLink("FOM Code", "SearchResults", new {fieldId = 2}, new AjaxOptions{HttpMethod = "POST"})</li>
            </ul>
        </div>
    </div>
</div>
}


Answers
Please correct me if I don't understand what you are trying to achieve:

You want to post the values in the textbox with Id SEGQuery and selected value of drop down?

At a quick glance, you are missing a type="submit"

Questions I have are 1. Why use ActionLink for the drop down values 2. Why not have the button below the drop down list - better for user

I will change the code to

     @using (Html.BeginForm("SearchResults", "SEG", FormMethod.Post))
    {
    <div class="seg-search">
        <div class="input-append">
            @Html.TextBoxFor(m => m.SEGQuery, new {@class = "input-large-seg"})
            <div class="btn-group">                
                <ul class="dropdown-menu">
                    <li>@Ajax.ActionLink("Company Name", "SearchResults", new {fieldId = 1}, new AjaxOptions{HttpMethod = "POST"})</li>
                    <li>@Ajax.ActionLink("FOM Code", "SearchResults", new {fieldId = 2}, new AjaxOptions{HttpMethod = "POST"})</li>
                </ul>
<button class="btn dropdown-toggle" type="submit" data-toggle="dropdown">
                    Search
                    <span class="caret"></span>
                </button>
            </div>
        </div>
    </div>
    }


This video can help you solving your question :)
By: admin