CODEWITHSUNDEEP
jqueryasp.net-mvc-3
Krishan
Krishan

Reputation: 2487

ASP.NET MVC partial view does not call my Action when i used $.getJSON method

I am building a Website for document management system on ASP.NET MVC3, in a page I am using a Partial view, the Partial View represents a simple Form.There is a drop down list and when one option is selected the ID of selected option should go to action Result. To do that i used $.getJSON method to pass values to action method. but problem is ID not goes to ActionResult. Can anyone help me to solve this problem?

cshtml code

<div >
  @using (Html.BeginForm("GetFilteredActivityLogs", "Document", FormMethod.Post, new
    {
        id = "activityLog",
        @class = "form-horizontal",

    }))
  {
<h3>Activity Log</h3>
   <div>
    <div style="float: left" class="control-label">
        <label>
            Action Type
        </label>
    </div>
    <div class="controls">
    @Html.DropDownListFor(model => model.SelectedActionId, Model.ActionTypes as SelectList, "All", new { 
        id = "SelectedActionId" 
})
    </div>
    <table class="table table-bordered" style="margin-top: 20px;  width: 100%;">
        <thead>
            <tr>
                <th style="width: 15%; text-align: center">
                    Employee No

                </th>
                <th style="width: 20%; text-align: center">
                    Employee Name
                </th>
                <th style="width: 45%; text-align: center">
                    Action
                </th>
                <th style="width: 20%; text-align: center">
                    Date and Time
                </th>
            </tr>
        </thead>
        <tbody id="Activities">
        </tbody>
    </table>
    </div>
  }
</div>

controller:

 public ActionResult GetFilteredActivityLogs(int actionTypeId)
    {
        return View();
    }

Script:

<script type="text/javascript">
    $(function ()
    {
        $('#SelectedActionId').change(function ()
        {
            var selectedActivityId = $(this).val();

            $.getJSON('@Url.Action("GetFilteredActivityLogs", "Document")', { activityId: selectedActivityId }, function (FilteredActivities)
            {
                var ActivitySelect = $('#Activities');
                // GroupSelect.empty();
                $.each(FilteredActivities, function (index, activity)
                {
                    // some code goes here...
                });
            });
        });
    });
</script>

Upvotes: 2

Views: 666

Answers (1)

centralscru
centralscru

Reputation: 6690

As BuildStarted says I think you need to make the data key you're sending in the getJSON request ("activityId") match the parameter on your action. I often just use "id" when there's a single parameter in order to get a match on the default route and therefore a nice URL (ie /Document/GetFilteredActivityLogs/123).

One other observation here: I think it would be worth having a look at the jQuery form plugin (http://malsup.com/jquery/form/). As it stands you're defining your parameters twice, once in BeginForm and again in your javascript. If you enable ajax on the form itself using the plugin you can define the params only in BeginForm, then in the "change" event handler submit the form.

Upvotes: 1

Related Questions