CODEWITHSUNDEEP
javascriptasp.net-mvc
LearnProgramming
LearnProgramming

Reputation: 806

Asp.net MVC, how to avoid slashes(/) in parameter in javascript

enter image description here

Picture above shows snippets of Furnitures table. The user will key-in their desired reference number in ReferenceNum field. The problem is, the data itself have slash(/). Everytime the user try to submit the value, my url became MyWebsite.com/Furniture/PriceList/Ref/3/Case2, thus the website couldnt find the website.

View

<div class="form-group row">
    <label class="control-label col-md-2">Reference Number</label>
    <div class="col-md-8">
        <input type="text" class="form-control" id="RefNum" />
    </div>
    <div class="col-md-2">
        <input class="btn btn-success" id="getReference" value="Find"/>
    </div>
</div>

<p id="rData">
</p>

JS

<script type="text/jscript">
$('#getReference').click(function () {
    $.getJSON('/Furniture/PriceList/' + $('#RefNum').val(), function (data) {

        var items = '<table><tr><th>Name</th><th>Reference Number</th></tr>';
        $.each(data, function (i, lists) {
            items += "<tr><td>" + lists.ItemName + "</td><td>" + lists.ReferenceNum + "</td></tr>";
        });
        items += "</table>";

        $('#rData').html(items);
    });
})

Controller

public JsonResult PriceList(string id)
{
    var result = db.Furnitures.Where(x => x.ReferenceNum == id);

    return Json(result, JsonRequestBehavior.AllowGet);
}

Upvotes: 0

Views: 74

Answers (2)

user3559349
user3559349

Reputation:

You can add the result as a query string value, rather than a route value

$('#getReference').click(function () {
    $.getJSON('/Furniture/PriceList?id=' + $('#RefNum').val(), function (data) {

or

$('#getReference').click(function () {
    $.getJSON('@Url.Action("PriceList", "Furniture")', { id: $('#RefNum').val() }, function (data) {

Upvotes: 2

Tanmay
Tanmay

Reputation: 1165

You can use %2F to escape slash(/) character in URL.

So updated JS code will be:

<script type="text/jscript">
$('#getReference').click(function () {
    $.getJSON('/Furniture/PriceList/' + $('#RefNum').val().replace(/\//g,'%2F'), function (data) {   //<--- Fix

        var items = '<table><tr><th>Name</th><th>Reference Number</th></tr>';
        $.each(data, function (i, lists) {
            items += "<tr><td>" + lists.ItemName + "</td><td>" + lists.ReferenceNum + "</td></tr>";
        });
        items += "</table>";

        $('#rData').html(items);
    });
})

Upvotes: 1

Related Questions