尝试从部分视图调用 ajax 后更改文本框

Question

Im trying to change a "name" textbox color to (blue if it is male, and pink if it is female) after changing a "gender" dropdown in a partial view.

Index View:

@{
    ViewData["Title"] = "Home Page";
    var gender = ViewBag.Gender; //breakpoint
}
 @if (gender == "Male") 
{
    <div id="name">
        <label asp-for="Name">Name</label>
        <input id="nametextbox" type="text" asp-for="Name" style="background-color: lightblue" />
    </div>
}
else if (gender == "Female")
{
    <div id="name">
        <label asp-for="Name">Name</label>
        <input id="nametextbox" type="text" asp-for="Name" style="background-color: lightpink" />
    </div>
}
else
{
    <div id="name">
        <label asp-for="Name">Name</label>
        <input id="nametextbox" type="text" asp-for="Name" style="background-color: white" />
    </div>
}
<div id="gender">
    <partial name="_GenderDropdown" model="Model" />
</div>

Partial View:

<label>Gender</label>
<select id="genderstring">
    <option value="">Select Gender</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        //ajax for posting gender to controller

        $('#genderstring').on('change', function () {
            $.ajax({
                url: '@Url.Action("Index", "Home")',
                type: 'GET',
                data: { gender: $("#genderstring").val() },
                success: function () {
                
                },
                error: function () {
                
                }
            });
        });

    });

</script>

Controller:

public IActionResult Index(string gender)
    {

        if(gender == null)
        {
            return View(new User { Name = "", Gender = "" });
        }
        else
        {
            ViewBag.Gender = gender;
            return View("Index"); //breakpoint
        }
    }

With this 2 breakpoints i can see that the data is passing but after I change the gender it gets to the view with the gender in the viewbag but the rest of the page doesen't run.

Answer 1

When you use ajax,it would not reload your page after backend code finishing by default.More detailed explanation and solution you could check as follow:

The first way

You could use .html() method to render the backend result to html after ajax success:

1.View(Be sure add a div to contain the whole html ):

<div id="result">    //add the div......
    @if (gender == "Male")
    {
        <div id="name">
            <label asp-for="Name">Name</label>
            <input id="nametextbox" type="text" asp-for="Name" style="background-color: lightblue" />
        </div>
    }
    else if (gender == "Female")
    {
        <div id="name">
            <label asp-for="Name">Name</label>
            <input id="nametextbox" type="text" asp-for="Name" style="background-color: lightpink" />
        </div>
    }
    else
    {
        <div id="name">
            <label asp-for="Name">Name</label>
            <input id="nametextbox" type="text" asp-for="Name" style="background-color: white" />
        </div>
    }
    <div id="gender">
        <partial name="_GenderDropdown" model="Model" />
    </div>
</div>

2.Js in partial view:

<script>
    $(document).ready(function () {    
        $('#genderstring').on('change', function () {
            $.ajax({
                url: '@Url.Action("Index", "Home")',
                type: 'GET',
                data: { gender: $("#genderstring").val() },
                success: function (res) {
                    $("#result").html(res);   //add this...
                },
                error: function () {

                }
            });
        });

    });

</script>

3.Controller:

You need return PartialView instead of returning View,because if you return view it will generate the layout(eg the nav bar) again (you could have a try by yourself).

[HttpGet]
public IActionResult Index(string gender)
{

    if (gender == null)
    {
        return View(new User { Name = "", Gender = "" });
    }
    else
    {
        ViewBag.Gender = gender;
        return PartialView("Index"); //change here...
    }
}

Result:

---

The second way

You could avoid using ajax,just use window.location.href to reload the page(The view and controller are the same as yours, do not change like the first way ):

<script>
    $(document).ready(function () {    
        $('#genderstring').on('change', function () {
            window.location.href = "/Home/Index?gender=" + $("#genderstring").val();               
        });

    });  
</script>

Result:

Note:

If you want to maintain the select list selected item ,you may choose the first way,and modify your js like below:

<script>
    $(document).ready(function () {
        //ajax for posting gender to controller

        $('#genderstring').on('change', function () {
            var selected_item = $("#genderstring").val(); //add this ....

            $.ajax({
                url: '@Url.Action("Index", "Home")',
                type: 'GET',
                data: { gender: selected_item },
                success: function (res) {
                    $("#result").html(res);  
                    $("#genderstring").val(selected_item);   //add this....
                },
                error: function () {
                }
            });
        });

    });

</script>

Result: