Display Information from LINQ query

So I have a string that has been passed from JS to my controller like so:

JavaScript

function findEmployees(userCounty) {
    $.ajax({
        type: "POST",
        dataType: "json",
        url: '@Url.Action("getCounty", "Contact")',
        data: JSON.stringify(userCounty),
        contentType: "application/json",
    });
}

Controller

    [HttpPost]
    public ActionResult Index([FromBody] string userCounty)
    {
        var county = userCounty.Substring(0, userCounty.IndexOf(" "));
        var query = from m in _context.model where m.county == county select new Model 
        {
          FirstName = m.Firstname
          LastName = m.LastName
        };

        if (query == null)
        {
            return NotFound();
        }
        return View(query.ToList());
    }
    [HttpGet]
    public ActionResult Index()
    {
        return View();
    }

View

@model Project.Models.ModelName
<table class="table">
<tbody>
    <tr>
        <td>
            @Html.DisplayFor(model => model.FirstName) @Html.DisplayFor(model => model.LastName)
        </td>
    </tr>
</tbody>

I am able to pass the string from JS to my controller and query the database but how do I update the page to show the results of the query in my view? Anything helps. Thank you!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The data returned by ajax is text or json. If you want to use c# to update the page. You can make action getCounty return partial view, partial view automatically returns data with html.

Change action getCounty.

    [HttpPost("getCounty")]
    public ActionResult Index([FromBody] string userCounty)
    {
        var county = userCounty.Substring(0, userCounty.IndexOf(" "));
        //...
        return PartialView(query.ToList());
    }

PartialView Index.cshtml

@model List<ModelName>
<table class="table">
<tbody>
    @for (var i = 0; i < Model.Count; i++)
    {
        <tr>
            <td>
                @Html.DisplayFor(model => model[i].FirstName) @Html.DisplayFor(model => model[i].LastName)
            </td>
        </tr>
    }
</tbody>
</table>

View

@model ModelName
<div id="datalist">
    
</div>
<!--other code-->
@section Scripts{
    <script>
    function findEmployees(userCounty) {
        $.ajax({
            type: "POST",
            //dataType: "json",
            url: '@Url.Action("getCounty", "Contact")',
            data: JSON.stringify(userCounty),
            contentType: "application/json",
            success: function (data) {
                $('#datalist').html(data)
            },
            error: function (e) {
                console.log(e)
            }
        });
    }
    </script>
}

It can generate different data tables according to userCounty

Method 2

You can get the list to the page like this.You can then press inside a div or ul list with each loop.

function findEmployees(userCounty) {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: '@Url.Action("getCounty", "Contact")',
            data: JSON.stringify(userCounty),
            contentType: "application/json",
            success: function (result) {
                if (result.data.length !== 0) {
                    $.each(result.data, function (index, value) {
                        var firstName = value.firstName;
                        var lastName = value.lastName;
                    });
                }
            },
        });
    }


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x