Asp.Net MVC Dynamicaly create url for ajax request

Question

I have a list view with list of task. Each task have it state displays in DropDown list. Also I have a controller method to change task state. My view:

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.TaskText)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TillDate)
        </td>
        <td>
            @Html.EnumDropDownListFor(modelItem => item.State, new { @class="state", @onchange="Drop()"})
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Id })
        </td>
    </tr>
}

My controller method:

    [HttpPost]
    public ActionResult UpdateState(int id, int state)
    {
        context.UpdateState(id, state);
        return View();
    }

Also I have such JQuery code:

    function Drop()
    {
        $.ajax(
            {
                url: "UpdateState",
                type: "POST",
                success: function ()
                { alert("123123"); }
            }
        );
        alert("asdasd");
    }

How I can dynamicyle create url for ajax that will contain item id and selected state?

Kammersgaard · Accepted Answer · 2017-06-25 20:50:32Z

1

So you have your sections you can render. You'd render a script section in the view. And in the view you could render the url dynamically.

@section scripts {
    <script>

    function Drop() {
        $.ajax({
            url: "UpdateState/?id="@item.Id,
            type: "POST",
            success: function () {
                alert("123123");
            }
        });

        alert("asdasd");
    }
    </script>
}

answered Jun 25, 2017 at 20:50

Kammersgaard

741 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gleb Over a year ago

That's it. Thanks. But now I have one more problem. My action mehtod works, but nevere rises success ajax function. There is an error 500. As I understand it is becouse my Action method return View(). What shuld I return?

Kammersgaard Over a year ago

You could probably return "return new HttpStatusCodeResult(HttpStatusCode.OK);". That'll return HTTP 200. You'll need System.Net in your using statements.

Tomas Smagurauskas · Accepted Answer · 2017-06-25 21:10:59Z

1

Url.Action("action", "controller", new { id = "123" }) should work great in your situation. Url.Action generates url string to your controller/action. Also you can provide url parameters to it.

function Drop()
{
    $.ajax(
        {
            url: "@Url.Action("UpdateState", "YourController", new { id = item.id, state = item.State })"
            type: "POST",
            success: function ()
            { alert("123123"); }
        }
    );
    alert("asdasd");
}

answered Jun 25, 2017 at 21:10

Tomas Smagurauskas

7066 silver badges16 bronze badges

Comments

Yuval Perelman · Accepted Answer · 2017-06-25 21:04:42Z

If you are using submit button, you should put all the data of the entity in a form inputs. If you want to use js ajax request, you need to bring the data from somewhere. an easy way to do so would be to store the ID of each item in a hidden element inside each row and to give each row a class so it could be selected. For example:

@foreach (var item in Model) {
    <tr class="taskData">
        <td>
            @Html.DisplayFor(modelItem => item.TaskText)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TillDate)
        </td>
        <td>
            @Html.EnumDropDownListFor(modelItem => item.State, new { @class="state", @onchange="Drop()"})
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            <input type="hidden" class="taskId" value="@item.Id" />
        </td>
    </tr>
}

and then with the js:

function Drop()
    {
        var data=$(".taskData").map(function(){
                       var $this=$(this);
                       return {id:$this.find(".taskId").val(),
                               state:$this.find(".state").val()};
             }).get();
        $.ajax(
            {
                url: "UpdateState",
                type: "POST",
                data:data,
                success: function ()
                { alert("123123"); }
            }
        );
        alert("asdasd");
    }

Collectives™ on Stack Overflow

Asp.Net MVC Dynamicaly create url for ajax request

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related