Question

我想更改要在点击时呈现的部分视图。我花了很多时间在谷歌搜索解决方案。

在加载主页面时渲染零件。

<div id="tableContent">
    @{Html.RenderPartial("GetTableView", Model);}
</div>

我想点击这个paritial，就像这样：

<div id="tableContent">
    <input type="button" class="btn btn-default" 
     onclick="Render Partial "GetTableView" in tableContent (replace the content)" />
</div>

我的模特

public class ImportModel
{
    public class ImportFileDetails
    {
        [Display(Name = "File Name")]
        public string Filename { get; set; }
        [Display(Name = "Total Columns")]
        public int TotalColumns { get; set; }
        [Display(Name = "Total Rows")]
        public int TotalRows { get; set; }
        [Display(Name = "Import Rows")]
        public int ImportRows { get; set; }
        public List<string> Header { get; set; }
        public ICollection<RepCodesFile> RepCodesFile { get; set; }
    }
}

public class RepCodesFile
{
    public string RepCode { get; set; }
    public string Description { get; set; }
}

我的控制器

    public ActionResult ImportFile(string ImportFile)
    {
        ImportModel.ImportFileDetails File = new Models.ImportModel.ImportFileDetails();
        // Model is passed to View corectly
        return View(File);
    }

我的主要观点

@model Models.ImportModel.ImportFileDetails
@{
    ViewBag.Title = "Import";
}

<h2>@ViewBag.Title</h2>
<hr />

@if (Model.Filename != null || Model.ImportRows == 0)
{
    <div id="tableContent">
        @{Html.RenderPartial("GetTableView", Model);}
    </div>
}
else
{
    <h4 class="text-warning">No data for import</h4>
}

我的偏爱

@model Models.ImportModel.ImportFileDetails
    <table id="filetable" class="table table-bordered pagination" cellspacing="0">
        <thead>
            <tr>
            @foreach (string item in Model.Header)
            {
                <th>@item</th>
            }
            </tr>
        </thead>
        <tbody>
            foreach (AutogemCMS.Models.RepCodesFile item in Model.RepCodesFile)
            {
                <tr>
                    <td>@item.RepCode</td>
                    <td>@item.Description</td>
                </tr>
            }
        </tbody>
    </table>

请帮忙。

由于

<小时/> 加载GIF解决方案：这不是我想要的，但对我来说足够好。

控制器：

    if (Request.IsAjaxRequest())
    {
        return PartialView("GetTableView", File);
    }
    else
    {
        return View(File);
    }

主要观点：

<div id="tableContent">
    <img src="~/Content/images/ajax-loader.gif" class="center-block img-responsive" />
</div>

$(function () {
    $.ajax({
        url: '/Import/ImportFile?ImportFile=@Model.Filename',
        dataType: 'html',
        success: function (data) {
            $('#tableContent').html(data);
        }
    });
});

Answer 1

通过javascript中的点击事件

$("#tableContent").load('@Url.Action("PartialViewResult", "Controller_Name")');

N.B。：PartialViewResult必须返回PartialView(model) 和.cshtml页面部分页面。

Answer 2

例如，创建一个ActionLink：

@Ajax.ActionLink("Any Text Here", "ImportFile", "ControllerName", null, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "get", UpdateTargetId = "tableContent" })

然后更改Action，返回部分View，如下所示：

public PartialViewResult ImportFile(string ImportFile)
{
    ImportModel.ImportFileDetails File = new Models.ImportModel.ImportFileDetails();
    // Model is passed to View corectly
    return PartialView("PartialView", model);
}

Answer 3

放置内容div（id = tableContent）。内容将被部分视图替换：
放在里面：
一个。隐藏加载gif动画 - id = loading
湾动作按钮 - id = showContent

执行操作按钮，单击以删除按钮，取消隐藏gif动画并运行ajax，这将获得部分视图。

<div id="tableContent">
    <input type="button" class="btn btn-primary" id="showContent" value="Show Content" />
    <img id="loading" src="~/Content/images/ajax-loader.gif" class="center-block img-responsive hidden" />
</div>

<script>
    $('#showContent').click(function () {
        $('#showContent').remove();
        $('#loading').removeClass("hidden");
        $.ajax({
            url: '/Import/ImportFile?ImportFile=@Model.Filename',
            dataType: 'html',
            async: true,
            success: function (data) {
                $('#tableContent').html(data);
            }
        });
    })
</script>

单击模型的ASP.NET MVC PartialView

3 个答案: