Cannot pass parameters from View to Controller via JavaScript

Question

Although I manage to send the grid's selected row id to the controller, the url for opening action view cannot be built up (it is created /Controller/Action instead of /Controller/Action/id. So, when I try to open the view with /Controller/Action/id it is open, but it cannot be opened by button click as below.

View:

<input type="button" id="btn" name="name" value="send to Server!" />

<script>
$('#btn').click(function () {
    var items = {};
    var grid = $('#Grid').data('kendoGrid');
    var selectedElements = grid.select();
    var item = grid.dataItem(selectedElements[0]);

    $.ajax({
        type: "POST",
        data: item.ID, //I obtained the id properly
        url: '@Url.Action("CreateParticipant", "Training")',
        success: function (result) {
            //console.log(result);
        }
    })
})
</script>

Controller:

// GET: /Training/CreateParticipant/5
public ActionResult CreateParticipant(int? id)
{
    Training training = repository.Trainings.FirstOrDefault(m => m.ID == id);
    if (training == null)
    {
        return HttpNotFound();
    }
    var trainingParticipantViewModel = new TrainingParticipantViewModel(training);
    return View(trainingParticipantViewModel);
}

Route.config:

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            //defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            defaults: new { controller = "Multiplier", action = "Index", id = UrlParameter.Optional }
        );
    }
}

Is there another example as above to pass the parameters or is there any mistake on the code above? Thanks in advance.

Frebin Francis · Accepted Answer · 2015-02-26 14:25:19Z

2

Javascript

$('#btn').on("click",function () {
    var items = {};
    var grid = $('#Grid').data('kendoGrid');
    var selectedElements = grid.select();
    var item = grid.dataItem(selectedElements[0]);

        $.ajax({
            type: "GET",
            data: item.ID, //I obtained the id properly
            url: '@Url.Action("CreateParticipant", "Training")/'+item.ID,
            datatype:'html',
            success: function (result) {
              alert(result)
            }
        })
    })

Or use

$('#btn').on("click",function () {
    var items = {};
    var grid = $('#Grid').data('kendoGrid');
    var selectedElements = grid.select();
    var item = grid.dataItem(selectedElements[0]);

    window.location.href= '@Url.Action("CreateParticipant", "Training")/'+item.ID; 
});

Hope this helps.

edited Feb 26, 2015 at 14:25

answered Feb 26, 2015 at 14:04

Frebin Francis

1,9151 gold badge12 silver badges19 bronze badges

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

9 Comments

Murat Yıldız Over a year ago

I obtained the related view's html in alert. However, after pressing OK button or commenting out this alert line, the related view still cannot be rendered. I tried on another browser by clearing all the history and cookies of it, but still no change. It is really unbelievable (I have already had many views and opened these views by means of different option i.e. hyperlink, image, button, etc.

Frebin Francis Over a year ago

where you want to show this html ? you have to append the html to any of the content tag like div to render the html

Murat Yıldız Over a year ago

In CreateParticipant view as called in the controller above.

Frebin Francis Over a year ago

just try to out window,location.href= '@Url.Action("CreateParticipant", "Training")/'+item.ID inside button click remove the ajax call.i will update my answer.

Frebin Francis Over a year ago

see $.ajax is using for asynchronously loading the page but window.location.href is for normal loading that's the difference.

|

Community · Accepted Answer · 2017-05-23 12:17:17Z

1

.ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
            <div class="toolbar">
            @(Html.Kendo().Button()
                .Name("addbtn")
                .Content("Add New")
                .HtmlAttributes(new { type = "button", @class = "k-primary k-button k-button-icontext js-myKendoButton", @data_id = @Model.YourID, onclick = "onClick()" })
            )
            </div>
        </text>);
    })

And then you will grab the data-attribute with jQuery.

$('.js-myKendoButton').attr('data-id');

More here: How to use dashes in HTML-5 data-* attributes in ASP.NET MVC

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Feb 26, 2015 at 10:54

Razvan Dumitru

12.5k5 gold badges38 silver badges55 bronze badges

1 Comment

Murat Yıldız Over a year ago

Thanks for reply. There is an error on " @data_id = @Model.ID" section due to the fact that it is a list instead of one record. On the other hgand, I had tried to use id values in HtmlAttributes, but get the same error. So, I think it is better for this situation to use a javascript methof and call it from HtmlAttributes. Any other solution?

Shahzad Khan · Accepted Answer · 2015-02-26 11:59:11Z

0

<script>
$('#btn').on("click",function () {
    var items = {};
    var grid = $('#Grid').data('kendoGrid');
    var selectedElements = grid.select();
    var item = grid.dataItem(selectedElements[0]);

    $.ajax({
        type: "POST",
        data: {ID  : item.ID}, //I obtained the id properly
        url: '@Url.Action("CreateParticipant", "Training")',
        success: function (result) {
            //console.log(result);
        }
    })
})
</script>

use this ,i hope this will be help you

answered Feb 26, 2015 at 11:59

Shahzad Khan

5303 silver badges14 bronze badges

9 Comments

Murat Yıldız Over a year ago

thnanks a lot, it is much more pretty to obtain ID parameter and the id parameter can be passed to controller. However the related view cannot be called. On the other hand, when I type the calling address as localhost:23879/Training/CreateParticipant/2 it works. But when calling by button it behave as I call localhost:23879/Training with no action and no id parameter. So, there is no problem on viewmodel side etc. Any idea?

Shahzad Khan Over a year ago

welcom,if id is nullable so no affect on yours model but first thingn is first prepared your model if id is null.

Murat Yıldız Over a year ago

I checked if id is null in the controller method and there is no problem regarding to id value.

Shahzad Khan Over a year ago

Okay , so what is your next scenario dude?

Shahzad Khan Over a year ago

check id is not null and data is find then show the specific view other wise rendering the same view.

|

Collectives™ on Stack Overflow

Cannot pass parameters from View to Controller via JavaScript

3 Answers 3

9 Comments

1 Comment

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related