如何将来自不同实体的项目动态添加到 ASP.NET Core MVC 中的列表

2023-12-13

这是我第一次使用列表,我的场景有点复杂。我想添加一个类型的对象Story有一个列表句子可以动态添加。句子与以下内容具有一对一的关系Image以及另一个一对一的关系Audio(可以选择添加)。我设法将句子列表与故事对象一起添加到数据库中。但我不知道从哪里开始处理其他两个实体。

以下是每个实体的模型:

public class Story
{
    public int StoryId { get; set; }
    public string Title { get; set; }
    public string Type { get; set; }
    public DateTime Date { get; set; }

    public virtual IEnumerable<Sentence> Sentences { get; set; } // one to many Story-Sentence
}

句子类:

public class Sentence
{
    public int Id { get; set; }
    public string SentenceText { get; set; }

    public virtual Audio Audio { get; set; } // one to one Sentence-Audio
    public virtual Image Image { get; set; } // one to one Sentence-Image
}

图片类:

public class Image
{
    [Key]
    [ForeignKey("Sentence")]
    public int Id { get; set; }
    public string ImageSelected { get; set; }
    public virtual Sentence Sentence { get; set; }
}

Audio 类与 Image 类完全相同。风景。

@model Story
<div id="editorRows">
    @foreach (var item in Model.Sentences)
    {
        <partial name="_SentenceEditor" model="item" />
    }
</div>
<a id="addItem" asp-action="BlankSentence" asp-controller="StoryTest">Add Sentence...</a> <br />
<input type="submit" value="Finished" />

局部视图

@model Sentence
<div class="editorRow">
    @using (Html.BeginCollectionItem("sentences"))
    {
        <span>Name: </span> @Html.EditorFor(m => m.SentenceText);
    }
    @using (Html.BeginCollectionItem("sentences"))
    {
        <span>Image: </span> @Html.EditorFor(m => m.Image.ImageSelected);
    }
    <a href="#" class="deleteRow">delete</a>
</div>

我有一些动态添加和删除行的 JavaScript。

最后在控制器中我只是将模型保存在数据库中

        [HttpPost]
    public async Task<IActionResult> AddTwo(Story model/*IEnumerable<Sentence> sentence*/)
    {
        if (ModelState.IsValid)
        {
            _db.Story.Add(model);
            await _db.SaveChangesAsync();
            return RedirectToAction("Index");
        }
        return View(model);
    }

简而言之,我想随句子添加图像和音频。并且还能够正确访问整行进行编辑。


我根据你的代码做了一个demo。您可以将数据存储在 formData 中,然后使用 ajax 将其传递给控制器​​操作。

主视图:

@model Story
<form asp-action="AddSentence" method="post">
    <div id="editorRows">
        <input type="hidden" name="" value="@Model.StoryId" />
        @foreach (var item in Model.Sentences)
        {
            <partial name="_SentenceEditor" model="item" />
        }
    </div>
    <a id="addItem" asp-action="BlankSentence" asp-controller="StoryTest">Add Sentence...</a>
    <br />
    <input type="submit" id="submit" value="Finished" />
</form>

@section scripts {
    <script>
        $("#submit").click(function (e) {
            e.preventDefault();
            var formData = new FormData();

            $("input[name='Audio.AudioSelected']").each(function (i) {
                var AudioSelected = $(this).val();
                formData.append("Sentences[" + i + "].Audio.AudioSelected", AudioSelected);

            });
            $("input[name='Image.ImageSelected']").each(function (i) {
                var ImageSelected = $(this).val();
                formData.append("Sentences[" + i + "].Image.ImageSelected", ImageSelected);

            });
            $("input[name='SentenceText']").each(function (i) {
                var SentenceText = $(this).val();
                formData.append("Sentences[" + i + "].SentenceText", SentenceText);

            });

            $.ajax({
                method: 'post',
                url: "StoryTest/AddSentence",
                data: formData,
                processData: false,
                contentType: false,
                success: function () {

                }
            });

        });

        $("#addItem").click(function () {
            $.ajax({
                url: this.href,
                cache: false,
                success: function (html) { $("#editorRows").append(html); }
            });
            return false;
        });

        $("a.deleteRow").on("click", function () {
            $(this).parents("div.editorRow:first").remove();
            return false;
        });
    </script>
}

部分视图:

@model Sentence
<div class="editorRow">

    <span>Name: </span> @Html.EditorFor(m => m.SentenceText)

    <span>Audio: </span> @Html.EditorFor(m => m.Audio.AudioSelected)

    <span>Image: </span> @Html.EditorFor(m => m.Image.ImageSelected)

    <a href="#" class="deleteRow">delete</a>
</div>

控制器:

public IActionResult Index()
{
    Story story = new Story
    {
        Sentences = new List<Sentence>
        {
            new Sentence { Id = 1, SentenceText = "AAA"
            , Audio = new Audio{ AudioSelected = "True"}
            , Image = new Image{ ImageSelected = "True"} },

            new Sentence { Id = 2, SentenceText = "BBB"
            , Audio = new Audio{ AudioSelected = "False"}
            , Image = new Image{ ImageSelected = "False"}},

            new Sentence { Id = 3, SentenceText = "CCC"
            , Audio = new Audio{ AudioSelected = "True"}
            , Image = new Image{ ImageSelected = "False"}}
        }
    };
    return View(story);
}

[HttpPost]
public async Task<IActionResult> AddSentence(Story model)
{
    if (ModelState.IsValid)
    {
        _db.Story.Add(model);
        await _db.SaveChangesAsync();
        return RedirectToAction("Index");
    }
    return View(model);
}

public IActionResult BlankSentence()
{
    return PartialView("_SentenceEditor", new Sentence());
}

Result:

enter image description here

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将来自不同实体的项目动态添加到 ASP.NET Core MVC 中的列表 的相关文章

  • 具有 ASP.NET Identity 的 MVC 5 - 用户登录时获取声明

    我正在使用 OWIN 2 0 在登录用户后 我想从数据库中检索现有的声明 但如果我尝试获取用户的声明 它们将为空 如果我将相同的代码放入任何被调用的后续控制器中 那么声明就在那里 似乎只有在首次登录后的下一个请求之前 这些声明才可用 为什么
  • 身份服务器刷新令牌资源所有者密码凭证流程

    我正在使用 IdentityServer 来控制对 API 的访问 我有一个单独的身份验证 API 它发出令牌并验证访问请求以确保 API 的安全 我让用户能够通过安全的 Web 应用程序生成访问令牌 我正在使用资源所有者密码凭证流程 有没
  • _Layout.cshtml无法直接请求,因为它调用了“RenderBody”方法

    我使用属性来路由 这是否相关 我不知道 当我不使用 Route 属性时 共享控制器中的 Layaout 操作不起作用 但页面正在呈现 public class SharedController Controller GET Shared A
  • asp.net/jQuery:使用 jQuery 将数据发布到弹出窗口 [IE]

    我正在尝试在 asp net 应用程序中使用 jQuery 将数据发布到弹出窗口 如果弹出窗口打开 我会收到三个错误 第一个错误是 Errror the value of the property is null or undefined
  • 在 Python 中合并/添加列表

    我很确定应该有一种更 Pythonic 的方法来做到这一点 但我想不出一种方法 如何将二维列表合并到一维列表中 有点像 zip map 但有两个以上的迭代器 示例 我有以下列表 array 1 2 3 4 5 6 7 8 9 我希望有 re
  • C# SMTP 身份验证失败,但凭据正确

    这是我的问题 我编写了以下程序来测试是否可以发送电子邮件 class Program static void Main string args try Console WriteLine Mail To MailAddress to new
  • 如何从 Main 中获取 IConfiguration?

    以下仅用于说明目的 我有一个secrets json包含以下内容 Message I still know what you did last summer 我需要使用以下播种器为数据库播种 public static class Seed
  • 如何在ListBox中加载大量数据? ASP.NET MVC 应用程序

    我正在使用 ASP NET MVC 应用程序 要求用户能够从可能包含超过 30 000 个条目的列表框中选择一个项目 是否有一种使用 Ajax 调用来填充此 ListBox 内容的动态方法 效果良好 我是否最好只填充服务器上的 ListBo
  • 如何在登录名控件中显示用户名

    我有一个母版页 其中包含基于母版页的所有后续页面上显示的登录视图内容 我有一个用户名控件也嵌套在登录视图中 用于在用户登录时显示用户名 母版页中登录视图的代码显示如下 div class loginView div
  • ASP.net MVC 项目无法在 IIS 上编译

    我以前只是将 ASP NET 网站上传到实时服务器 IIS 会自动编译它们 但是 当我对 asp net MVC 项目执行相同操作时 我只是收到错误 并且我需要在上传项目之前发布 构建 项目 注意1 我使用的是VWD 2008 Expres
  • 显示 PDF ASP.Net MVC

    我的桌面上有一个文件用于测试 我试图在如下视图中显示它 ViewBag Title ShowFile h2 ShowFile h2 我用于控制器的代码是 HttpGet public ActionResult ShowFile string
  • 如何在 ASP.NET 中获取负载均衡器后面的主机名?

    我有几台服务器和一个负载均衡器 我想显示当前正在为该页面提供服务的服务器名称 我在用HttpContext Current Request ServerVariables SERVER NAME and HttpContext Curren
  • jquery ajax可以调用外部webservice吗?

    jquery ajax代码可以调用吗网络服务来自另一个域名或另一个网站 像这样 ajax type POST url http AnotherWebSite com WebService asmx HelloWorld data name
  • 如何找到 IIS 在负载/性能测试期间模拟的平均并发用户数?

    我正在使用 JMeter 进行负载测试 我正在练习通过简单地增加我的分布式 JMeter 测试用例中的线程数并启动测试来查找我们的网络服务器可以处理的最大并发线程 用户 数量 然后 我突然意识到 虽然 MAX 数字可能有用 但REAL我的网
  • AutoMapper.Mapper 不包含 CreateMap 的定义

    这可能是一个基本问题 但想知道我没有得到 AutoMapper Mapper CreateMap 方法 我使用了错误的 AutoMapper 参考 包吗 谢谢 静态版本CreateMap方法在 4 2 中已弃用 然后在版本 5 0 中从 A
  • 包括过滤器子集合[重复]

    这个问题在这里已经有答案了 我在为 LINQ 查询中包含的项目添加一些过滤条件时遇到一些困难 我的查询就像 var item Context Order Include Inner Include Inner first Include I
  • 使用部分函数短路列表映射

    因此 我创建了一个名为 tryMap 的函数 如下所示 tryMap with failure and success continuations let rec tryMapC R gt U list gt R gt T gt U opt
  • Visual Studio Code 调试默认 ASP.NET Core MVC WebApp:不起作用

    我正在使用 Manjaro linux 并尝试调试默认的 ASP NET Core MVC 项目 但调试停止 没有任何错误 我创建了该项目 dotnet new mvc in a Meow文件夹 没什么特别的 然后添加了新的配置 NET C
  • SQL参数化查询不显示结果

    我的 DataAcess 类中有以下函数 但它没有显示任何结果 我的代码如下 public List
  • ASP.NET MVC 和 Expression XAML - 如何集成?

    一些背景 ASP net MVC 主要是构建和开发 ASP NET 应用程序方式的范式转变 从 代码隐藏 类型的心态转变为更像标准 MVC Ruby on Rails 的心态 我赞扬它作为一种简化工具来简化单元测试和代码分离 尽管 html

随机推荐