选择实体的正确表示

本文关键字：表示 实体 选择 | 更新日期: 2023-09-27 18:32:54

我有相册模型：

public class Album
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Artist { get; set; }
    public int? Year { get; set; }
    public string Image { get; set; }
    public virtual ICollection<Track> Tracklist { get; set; }
    public string Description { get; set; }
}

我想通过以下方式实现将新相册添加到数据库中的功能：

  1. 在第一个视图上，用户应看到带有"艺术家"和"专辑名称"字段的表单。
  2. 然后他将此字段发布到操作中，操作应该将 album.getInfo 请求发送到 Lastfm API(http://www.lastfm.ru/api/show/album.getInfo(。
  3. 新相册应从响应构建并传递给用户。如有必要，他应该能够检查接收信息的正确性并编辑任何字段。
  4. 然后他将整个专辑发布到操作中，并将其保存到db。

您将如何实现此方案？特别是，最好将一个模型(相册(传递给每个操作，或者为每个操作创建模型(在这种情况下为两个(？关于操作和视图的相同问题：最好在一个操作和视图中执行有关创建和编辑相册的所有用户交互，还是以某种方式将它们分开？

我有几种解决方法，但在我看来，它们都不是很优雅，我觉得应该有更好的解决方案。

选择实体的正确表示

我会用AJAX处理这种情况。它不仅对用户更好(不需要往返(，而且还使它只是一个标准的旧表单提交服务器端(换句话说，非常容易(。基本上，你只需要标准的GET和POST操作：

public ActionResult Create()
{
    var model = new Album();
    return View(model);
}
[HttpPost]
public ActionResult Create(Album model)
{
    if (ModelState.IsValid)
    {
        db.Albums.Add(model);
        db.SaveChanges()
        return RedirectToAction("Index");
    }
    return View(model);
}

然后，在您看来：

@model Namespace.To.Album

@using (Html.BeginForm())
{
    @Html.LabelFor(m => m.Artist)
    @Html.EditorFor(m => m.Artist)
    @Html.LabelFor(m => m.Name)
    @Html.EditorFor(m => m.Name)
    <div class="js-visible">
        <button type="button" id="LookupAlbum">Lookup</button>
    </div>
    <div id="AlbumFields" class="js-hidden">
        <!-- rest of the fields here -->
    </div>
    <button type="submit">Create</button>
}

类，js-visible和js-hidden是我喜欢使用的便利类。它们的实现非常简单，如果你使用像 Modernizr 这样的东西，甚至更简单，因为如果支持并启用了 JavaScript，它会向你的 html 元素添加一个js类。

与现代化

.CSS

.js-visible {
    display:none;
}
.js js-visible {
    display:block;
}
.js .js-hidden {
    display:none;
}

没有现代化

.CSS

.js-visible {
    display:none;
}

JS(实际上是jQuery不费力的代码示例(

$('.js-visible').show();
$('.js-hidden').hide();

无论如何，这里的想法是，如果没有JavaScript功能或已禁用，则不会显示查找按钮，相反，用户只会看到所有字段。但是，如果您可以使用JavaScript(因此可以进行AJAX查找(，则其余的相册字段最初将被隐藏，查找按钮将显示在前两个字段之后。

然后，你只需要一些JavaScript来处理你的查找：

 $('#LookupAlbum').on('click', function () {
     var artist = $('#Artist').val();
     var album = $('#Name').val();
     $.get('/some/url', { artist: artist, album: album }, function (result) {
         // fill in the remaining fields with retrieved information
         $('#LookupAlbum').hide();
         $('#AlbumFields').show();
     });
 });

我有意尝试使这段代码保持基本状态，因为 AJAX 调用发生的很多事情都取决于您正在执行的操作。如果他们的 API 支持 JSONP，则 URL 将直接指向 LastFM(在这种情况下，AJAX 调用的主体将不同，您需要实现一个回调函数，由 JSONP 调用，该函数将填充您的字段。如果 LastFM 不提供 JSONP 或者您只是不想这样做，那么 URL 将转到您将创建的操作，该操作将调用 LastFM API 并返回其响应(基本上只是创建一个代理来绕过同源限制(。

无论何时何方，您都可以异步从 API 获取信息，并通过 JavaScript 填写字段。然后，隐藏查找按钮并显示剩余的相册字段。用户现在可以填写剩下的任何内容或修改 LastFM 返回的内容并仅提交一次.

相关文章：