尝试从局部视图进行 ajax 调用后更改文本框

Question

在部分视图中更改“性别”下拉菜单后，我试图将“姓名”文本框颜色更改为（如果是男性，则为蓝色，如果是女性，则为粉红色）。

索引视图：

@{
    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>

局部视图：

<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>

控制器：

public IActionResult Index(string gender)
    {

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

通过这 2 个断点，我可以看到数据正在传递，但是在我更改性别后，它会以视图袋中的性别进入视图，但页面的其余部分没有运行。

Answer 1

当你使用ajax时，默认不会在后端代码完成后重新加载你的页面。更详细的解释和解决方案你可以查看如下：

第一种方式

你可以在ajax成功后使用.html()方法将后端结果渲染成html：

1.View（一定要添加一个div来包含整个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的局部视图：

<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.控制器：

您需要返回 PartialView 而不是返回 View，因为如果您返回 View，它将再次生成布局（例如导航栏）（您可以自己尝试）。

[HttpGet]
public IActionResult Index(string gender)
{

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

结果：

---

第二种方式

您可以避免使用ajax，只需使用window.location.href重新加载页面（视图和控制器与您的相同，不要更改像第一种方式 ):

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

    });  
</script>

结果：

注意：

如果你想维护选择列表选中项，你可以选择第一种方式，修改你的js如下：

<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>

结果：