触发视图条件更改

Question

我对ASP.NET还是很陌生，只在一个旧项目中做此临时工作。我想根据条件显示两个不同的div。单击按钮即可切换条件。就我的研究而言，我最终尝试使用@TempData

<button onclick="showData()">Show</button>

@if (@TempData["Display"] != null)
{
    <div>Display Active</div>
}

@if (@TempData["Display"] == null)
{
    <div>No Display</div>
}

[showData()是对控制器的Ajax调用

$.ajax({
    type: "POST",
    url: "/borrow/display/0",
    data: $.toJSON({ "display": true })
}).done(function (output) {
});

控制器

[AllowAnonymous]
[HttpPost]
public ActionResult Display(string code)
{
    TempData["Display"] = true;
    return Json(new { response = true });
}

这种方法的问题在于，视图不知道TempData["Display"]发生的更改。如果我重新加载页面，则在单​​击切换按钮时它将正确呈现。有没有一种方法可以在不重新加载的情况下进行切换？或重新加载但保留视图和模型。我知道我可以使用JS进行切换，但是它不符合我的需求，因为我也需要在控制器中反映更改。

Answer 1

我认为您可以为此使用模型属性。这是一个样本。您可以参考。希望对您有帮助，我的朋友：））

    1. Model

        public class PersonViewModel
            {
                public int PersonId { get; set; }
                public string Name { get; set; }
                public bool isShow { get; set; }
                public int Age { get; set; }
            }

    2. Controller 

        public IActionResult Index()
        {
                    var model = new PersonViewModel() 
                    {
                        PersonId = 1,
                        Name = "Mr Abc"                           
                    };

                    model.isShow = model.Age > 18 ? true : false;
                    return View(model);
        }

        [HttpPost]
        public ActionResult ChangeAge(int age)
        {
            bool result = true;
            if (age < 18)
                result = false;
            return Json(new { response = result });
        }

    3. Views

        <h1>Details</h1>

        <div>
            <h4>Person</h4>
            <hr />
            <div class="row">
                <div class="col-sm-2">
                    @Html.DisplayNameFor(model => model.Name)
                </div>
                <div class="col-sm-10">
                    @Html.DisplayFor(model => model.Name)
                </div>

                <div class="col-sm-2">
                    @Html.DisplayNameFor(model => model.Age)
                </div>

                <div class="col-sm-10">
                    @Html.TextBoxFor(model => model.Age, new { @type = "number" })
                </div>
                <br />

                <div class="col-sm-8" id="result"></div>        
            </div>
        </div>
        <br />
        <div>
            <button id="changeAge">Change age</button>
        </div>

        @section Scripts
        {
            <script>
                $(document).ready(function () {

                    // init the data
                    if ('@Model.isShow' == 'True') {
                        $('#result').text('You can come inside.');                
                    } else {
                        $('#result').text('You are too young.');      
                    }

                    $('#changeAge').click(function () {
                        let ageValue = $('#Age').val();
                        $.ajax({
                            type: "POST",
                            url: '@Url.Action("ChangeAge", "Home")',
                            data: { "age": ageValue }
                        }).done(function (output) {
                            if (output.response) {
                                $('#result').text('You can come inside.');    
                            } else {
                                $('#result').text('You are too young.');    
                            }
                        });
                    });
                });
            </script>
        }