Question

我需要传递对象列表。我传递数据抛出ajax调用，ajax按预期返回结果，因此ajax调用获得正确的结果但部分视图不会呈现。

控制器

[HttpPost]
public ActionResult GetXlFile()
{
    List<ListMatchDetails> lstPreview = new List<ListMatchDetails>();

    if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any())
    {
        var xlFile = System.Web.HttpContext.Current.Request.Files["FileToPreview"];
        HttpPostedFileBase filebase = new HttpPostedFileWrapper(xlFile);
        if (null != filebase && filebase.ContentLength > 0)
        {
            if (String.Compare(filebase.ContentType, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", true, System.Globalization.CultureInfo.InvariantCulture) == 0)
            {
                using (Stream stream = filebase.InputStream)
                {
                    IExcelDataReader reader = null;

                    if (filebase.FileName.EndsWith(".xls"))
                    {
                        reader = ExcelReaderFactory.CreateBinaryReader(stream);
                    }
                    else if (filebase.FileName.EndsWith(".xlsx"))
                    {
                        reader = ExcelReaderFactory.CreateOpenXmlReader(stream);
                    }

                    reader.IsFirstRowAsColumnNames = true;
                    DataSet dsResult = reader.AsDataSet();
                    DataTable dtResult = dsResult.Tables[0];
                    if (dtResult.Rows.Count > 0)
                    {
                        foreach (DataRow dr in dtResult.Rows)
                        {
                            ListMatchDetails lmd = new ListMatchDetails();
                            lmd.FirstName = (dr[0] != DBNull.Value) ? dr[0].ToString() : string.Empty;
                            lmd.LastName = (dr[1] != DBNull.Value) ? dr[0].ToString() : string.Empty;

                            lstPreview.Add(lmd);
                        }
                    }
                    reader.Close();
                }
            }
        }
    }

    return PartialView("_ExcelGrid", lstPreview);
}

视图

@using app.Models;
@model IEnumerable<ListMatchDetails>

@{
    if (Model.Count() > 0)
    {
        ListMatchDetails row = Model.FirstOrDefault();
        <table class="table table-hover table-responsive scrollable table-striped ">
            <thead id="tableHeader">
                <tr>

                    <td>
                        @Html.LabelFor(x => row.FirstName)
                    </td>
                    <td>
                        @Html.LabelFor(x => row.LastName)
                    </td>

                </tr>
            </thead>
            <tbody class="pre-scrollable">

                @foreach (var record in Model)
                {
                    <tr>

                        <td>
                            @Html.ValueForModel(record.FirstName) 

                        </td>
                        <td>
                            @Html.ValueForModel(record.LastName)
                        </td>

                    </tr>
                }
            </tbody>
        </table>
    }
}

jquery的：

$('#btnPreview').click(function () {
                var formData = new FormData();
                var files = $("#btnbrowse").get(0).files;
                if (files.length > 0) { formData.append("FileToPreview", files[0]); }
                $.ajax({
                    url: '/ListMatch/GetXlFile',
                    type: 'POST',
                    dataType: 'json',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        //$('#record').html(result)
                        $('._ExcelGrid').json(result);
                    },
                    error: function () {
                        //alert('Click Called');
                    }
                });
            });

Answer 1

看起来你需要使用$（＆＃39;＃record＆＃39;）。html（结果）。确保你有像

这样的东西

{{1}}

Answer 2

直接将你的动作方法与你的jQuery ajax调用进行比较，看起来你正试图将ajax调用的结果解析为JSON字符串，但是你要返回{{1}部分视图。除非_ExcelGrid部分视图返回有效的JSON，否则当它尝试将其解析为JSON时，它将会中断。

我不能告诉它应该是怎么回事，因为我不确定你的视图中是什么_ExcelGrid，但一般来说你可以改变动作方法返回JSON而不是部分视图，然后在客户端解析/处理JSON或将返回的部分视图分配给具有._ExcelGrid的元素。你处理它的方式取决于你。

如果您选择返回部分视图，为了完成起见，我将您的ajax调用中的$("._ExcelGrid").html(result)更改为dataType，因为您不再期待JSON了。您可能还想将html设置为您要发送到服务器的内容类型，如果您没有明确说明，有时可能会遇到有趣的错误。

Answer 3

这会让你越过障碍。如果您希望我添加更多与您的问题相关的代码，请与我们联系。

_ExcelGrid.cshtml

A Partial View

控制器：

public class HomeController : Controller
{
    [HttpPost]
    public PartialViewResult GetXlFile()
    {
        return PartialView("_ExcelGrid");
    }

    public ActionResult GetXlFile(int? id)
    {
        return View();
    }

查看：

@{
    Layout = null;
}

<!DOCTYPE html>
@*credit to
https://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor*@
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index800</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('form').submit(function (event) {
                $.ajax({
                    url: this.action,
                    type: "POST",
                    data: $(this).serialize(),
                    success: function (result) {
                        $('#result').html(result);
                    }
                });
                return false;
            });
        });
    </script>
</head>
<body>
    <form>
        <div>
            @using (Html.BeginForm())
            {
                <input type="submit" value="OK" />
            }
            <div id="result"></div>
        </div>
    </form>
</body>
</html>

Answer 4

迎接这一天!!

您是否在主页上定义了部分视图？如果不是，您需要在主页面上定义部分视图，就像

一样

<div id="dvExcelGrid">
    @Html.Partial("_ExcelGrid", "your model")
   </div>

在ajax调用之后，部分视图不会呈现

4 个答案: