asp.net core passing jquery val as asp-route-id parameter

C# Corner

Marius Vasile

5y9.2k.NET

I have the following jquery

$(function () {
$("#Asset").on("change", function () {
var categoryId = $(this).val();
$("#Equipment").empty();
$("#Equipment").append("--Select Equipment--");
$.getJSON(`?handler=Equipment&id=${categoryId}`, (data) => {
$.each(data, function (i, item) {
$("#Equipment").append(`"${item.value}"> ${item.text}`);
});
$('#Equipment').selectpicker({ liveSearch: true });
});
$.getJSON(`?handler=AssetDetails&id=${categoryId}`, (data) => {
if (!jQuery.isEmptyObject(data)) {
$("#AssetID").val(data.assetID);
$("#AssetName").val(data.assetName);
$("#AssetManufacturer").val(data.assetManufacturer);
}
});
});
});

and a button

class="btn form-control" type="submit" asp-page-handler="Test" asp-route-id="id" id="testid">Button

Select

class="col-md-5">
"Asset" class="form-control" asp-items="@(new SelectList(string.Empty, "WOAId", "AssetID", "AssetName", "AssetManufacturer"))" data-style="border-warning bg-transparent">
"">--Select Asset--

How do I pass $("#AssetID").val(data.assetID); as id in button asp-route-id?

10 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
happy to know that you got the correct url format , now if data is not being mapped to your action then send the id as query string via url in ajax,
modify the url of ajax as
url: '?handler=Test?id='+id,
+1
Marius Vasile5y ago
I figured out how to pass parameter from jquery and perform a redirect as well. It is so simple actually
"submit" asp-page-handler="Test">Button
"id" id="AssetID" />
public IActionResult OnPostTest(string id)
        {
            return RedirectToPage("/WO/Reports", new {id=id });
        }
where id=AssetID is populated by the jquery and name="id" is passing the value as parameter to OnPost
+1
Marius Vasile5y ago
I managed to get the id with ajax but not to redirect the page. Anyway, it fits my needs for the moment. Code below
$(function () {
    $('#btnPost').on('click', function () {
        var id = $("#fun").val();
        $.ajax({
            type: 'POST',
            url: '/WO/Reports?handler=Test&idPost=' + id,
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            contentType: "application/json",
            dataType: "json",
            success: function (response) {

            },
            failure: function (response) {
                alert(response);
            }
        });
    });
});
+1
Marius Vasile5y ago
1. "text/javascript">
2. $(function () {
3. $('#btnPost').on('click', function () {
4. var id = $("#fun").val();
5. $.ajax({
6. type: 'POST',
7. url: '/WO/Reports?handler=Test&idPost=' + id,
8. beforeSend: function (xhr) {
9. xhr.setRequestHeader("XSRF-TOKEN",
10. $('input:hidden[name="__RequestVerificationToken"]').val());
11. },
12. contentType: "application/json",
13. dataType: "json",
14. success: function (response) {
16. },
17. failure: function (response) {
18. alert(response);
19. }
20. });
21. });
22. });
but click on button has no action
+1

Marius Vasile5y ago

I tried with ajax

$(function () {
$('#btnPost').on('click', function () {
debugger;
var id = $("#fun").val();
$.ajax({
type: 'POST',
url: '?handler=Test',
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
contentType: "application/json",
dataType: "json",
data: { id: id },
success: function (response) {
},
failure: function (response) {
alert(response);
}
});
})
});

button

class="btn form-control" type="button" id="btnPost">Button

fun textbox

"hidden" value="" id="fun"/>

but I have no action whatsoever, no error, the id gets data

Marius Vasile5y ago

Thank you Kiran

On button click I have only one function

return RedirectToPage("/WO/Test2", new { id = id });

and the id is the one I try to send through jquery. The problem I have is that is not sent

Kiran Mohanty5y ago

On button click if you are redirecting to some other page , then probably you can do as below.

class="btn form-control" type="submit" asp-page-handler="Test" id="testid">Button
$('#testid').click(function (e) {
e.preventDefault();
var id = $("#AssetID").val(data.assetID);
if (id > 0) {
window.location.href = $('#testid').attr('href') + '/' + id;
}
});

Please remove asp-route attribute and make the button as "a" tag. (some styles you may need to add or remove accordingly)

Sachin Singh5y ago

on change of select , i am setting the value , so it should send the value.

Marius Vasile5y ago

It does not send any data. Is either blank if I use asp-route-id="" or it sends dumyData if I use asp-route-id="dumyData"

Sachin Singh5y ago

I don't know this will work or not , but this should work.

$.getJSON(`?handler=AssetDetails&id=${categoryId}`, (data) => {
if (!jQuery.isEmptyObject(data)) {
$("#AssetID").val(data.assetID);
$("#AssetName").val(data.assetName);
var x= data.assetID;
$('#testId').attr('asp-route-id',x );
}
});
});

and remove the attribute value from button, means make it null.

class="btn form-control" type="submit" asp-page-handler="Test" asp-route-id="" id="testid">Button