触发视图条件更改答案

【问题标题】：Trigger view condition change触发视图条件更改
【发布时间】：2020-07-29 11:49:49
【问题描述】：

我对 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 进行切换，但它不符合我的需要，因为我还需要在控制器中反映更改。

【问题讨论】：

标签： asp.net asp.net-mvc-4

【解决方案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>
        }

【讨论】：