如何使用 java 脚本在 MVC 中单击按钮时调用相同的局部视图

Posted 2023-04-01

【中文标题】如何使用 java 脚本在 MVC 中单击按钮时调用相同的局部视图

【英文标题】：How to call a same parial view on button click in MVC with java script

【发布时间】：2021-11-06 17:47:04

【问题描述】：

我需要在按钮单击时调用相同的视图。实际上我需要在按钮点击时刷新视图。

【问题讨论】：

您好，您尝试过解决方案吗？它会相应地解决您的问题。

请提供足够的代码，以便其他人更好地理解或重现问题。

【参考方案1】：

您可以尝试如下：

控制器：

   public class PartialController : Controller
    
        public IActionResult PartialViewFromButtonClick()
        
            return PartialView("_PartialViewFromBtnClick");
        
    

部分视图示例：

<h4>Load Partial View</h4>



<style>
    table 
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    

    td, th 
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    

    tr:nth-child(even) 
        background-color: #dddddd;
    
</style>

<div>
    <table class="table-bordered ">
        <tr>
            <td><strong>Search</strong></td>
            <td>
                <input type="text" name="searchkey" class="form-control" placeholder="Enter Search Key" />

            </td>
            <td>

                <input type="submit" value="Search" style="font-weight: bold;" />
            </td>
        </tr>


    </table>
</div>
<br />

您喜欢加载部分视图的视图：

html:

 <div>
        <button id="btnLoadPartialView" class="btn btn-primary">Load Partial View</button>
 </div>

<div id="loadPartailView">

</div>

Script:

@section scripts 
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () 
            $("#btnLoadPartialView").click(function () 
                $("#loadPartailView").load("/Partial/PartialViewFromButtonClick");
            );
        );
    </script>

Output:

注意：如果您想使用参数加载局部视图，您可以尝试这样 $('#loadPartailView').load('/PartialController/PartialViewFromButtonClick?parameter=2095'); 此外，每次以这种方式加载局部视图时，它都会自动刷新 partial view 本身。无需执行其他操作。

希望对你有帮助。