ASP.NET MVC - 查看以编辑连接 SQL 表中的数据答案

【问题标题】：ASP.NET MVC - View to edit data from a joined SQL tableASP.NET MVC - 查看以编辑连接 SQL 表中的数据
【发布时间】：2021-11-16 09:41:57
【问题描述】：

抱歉，我是 ASP.NET MVC 的新手，我正在开发一个 Web 应用程序，该应用程序部分由其他无法提供帮助的人完成。我有一个编辑新闻项目的视图，如下所示：

我要做的是删除“内容”部分并将其替换为“新闻内容”部分。

它似乎显示了来自 SQL 数据库的正确数据，但我无法让它显示 HTML 编辑器。这个新部分的数据来自一个名为 NewsArtical.cs 的链接 SQL 表

这是我的代码：

型号：

public partial class News
{
    public int ID { get; set; }

    public string Title { get; set; }
    public string Description { get; set; }
    public System.DateTime Date { get; set; }

    public Nullable<System.DateTime> LastModified { get; set; }

    public virtual NewsArtical NewsArtical { get; set; }
}

public partial class NewsArtical
{
    public int ID { get; set; }

    public string NewsContent { get; set; }
    public virtual News News { get; set; }
}

NewsController:

// GET: News/Edit/5
public async Task<ActionResult> Edit(int? id)
{
    if (id == null)
    {
        return RedirectToRecordNotFound();
        //return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }

    News news = await _entities.News.FindAsync(id);

    if (news == null)
    {
        return HttpNotFound();
    }

    return View(news);
}

查看Edit.cshtml:

@model CELIntranet.Models.News
@{
    ViewBag.Title = string.Format("Edit News Article: {0}", Model.ID);
}

@Html.Partial("_ContentToolbarPartial", (object)@ViewBag.Title)
    <body>
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()

            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.ID)

            <div class="form-group">
                @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label" })

                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control focusme" } })
                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })

            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label" })

                @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control", cols = 80, rows = 10 } })

                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })

                @Html.LabelFor(model => model.NewsArtical.NewsContent, htmlAttributes: new { @class = "control-label" })

                @Html.EditorFor(model => model.NewsArtical.NewsContent, new { htmlAttributes = new { @class = "form-control", cols = 80, rows = 10 } })

                @Html.ValidationMessageFor(model => model.NewsArtical.NewsContent, "", new { @class = "text-danger" })
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label" })

                @Html.TextBox("Date", Model.Date.ToShortDateString(), (object)new { @class = "form-control form-control-minwidth" })
                @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.LastModified, htmlAttributes: new { @class = "control-label" })

                @Html.EditorFor(model => model.LastModified, new { htmlAttributes = new { @class = "form-control form-control-minwidth", @readonly = "readonly" } })
                @Html.ValidationMessageFor(model => model.LastModified, "", new { @class = "text-danger" })
            </div>
            <br />
            <div class="form-group">
                <input type="submit" value="Save" class="btn btn-primary btn-sm" />
                <input type="button" value="Cancel" class="btn btn-default btn-sm" onclick="history.go(-1);return true;" />
            </div>
        }
    </body>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/summernote")

    <script type="text/javascript">
        $(function () {
            $("#Description").summernote({
                minHeight: 200
            });

            $('#Date').datetimepicker({
                format: 'DD/MM/YYYY',
                showClose: true,
                showClear: true,
                toolbarPlacement: 'top'
            });
        });
    </script>
}

非常感谢任何帮助。

谢谢。

【问题讨论】：

标签： c# asp.net-mvc

【解决方案1】：

屏幕截图中的内容框在 JavaScript 中添加了 HTML 编辑器，代码如下：

 $("#Description").summernote({
                minHeight: 200
            });

解释：内容框在 HTML 中的 ID 为“描述”，并且调用了一个名为“summernote”的 JQuery 函数，该函数可能会添加 HTML 编辑器。要将 HtmlEditor 添加到 NewsContent 文本框中，您可以执行类似的操作，例如添加：

 $("#NewsContent").summernote({
                minHeight: 200
            });

【讨论】：

我找到了这个网站的summernote：summernote.org
以斯拉，感谢您的指点。我已经按照建议进行了调整，但编辑器仍然没有显示。在视图中，我的编码是这样的
@Html.EditorFor(model => model.NewsArtical.NewsContent, new { htmlAttributes = new { @class= "form-control", cols = 80, rows = 10 } })
检查 html 本身并找到 NewsContent 的文本框的 ID。确保 javascript 看起来正确，并检查控制台中的任何错误。
Ezra，我按照建议更改了 ID，现在可以使用了。谢谢你的帮助。 $("#NewsArtical_NewsContent").summernote({ minHeight: 200 });