call to function from the controller in index.html

Question

In my mvc app I have combobox, I am trying to do the following: when the user choose some item that will call to some function from the controller.

Index.html:

 @using (Ajax.BeginForm("dor", "Home", new AjaxOptions
                    {
                        HttpMethod = "Get",
                        //UpdateTargetId = "myPic",
                        InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace
                    }))
                    {
                        @Html.DropDownListFor(x => x.SelectedFileName, Model.Files, new { Name = "map", @class = "form-control", onchange = "CallChangefunc()" })
                    }

.
.
.

 <script type="text/javascript">
    function CallChangefunc() {
     window.location.href = '@Url.Action("dor","Home")';
 }
 </script>

HomeVM:

public class HomeVM
{
    public List<SelectListItem> Files { get; set; }
    public string SelectedFileName { get; internal set; }
    public List<string> DynamicAlgorithems { get; set; }
}

Homecontroller:

public void dor()
{
       //some code    
}

The problem: when the user choose some item from combobox it redirect me to blank page i.e to http://localhost:55354/Home/dor, but I only want to call the function named dor, not to go to blank page!.

what am I missing?

Then make an ajax call, not redirect to it using `location.href`. — , Jul 19 '18 at 23:42

score 1 · Accepted Answer · answered Jul 20 '18 at 02:07

window.location.href always redirect to a new page URL assigned to it. You should use jQuery.ajax() to call the action method when onchange method triggered and return desired result:

jQuery (inside $(document).ready())

$('#SelectedFileName').change(function() {
    var selectedFileName = $(this).val();

    $.ajax({
        type: 'GET',
        url: '@Url.Action("Dor", "Home")',
        data: { fileName: selectedFileName },
        success: function (result) {
            // do something
        }
    });
});

Controller

[HttpGet]
public ActionResult Dor(string fileName)
{
    // do something
}

Note: Make sure that action method argument has same name with assigned data passed from AJAX callback.

call to function from the controller in index.html

1 Answers1