选择实体

Question

的右表示我的相册样板：

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. 然后他将整个相册发送到操作，将其保存到数据库。

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

我有几个解决方法，但他们都认为我不是很优雅，我觉得应该有更好的解决方案。

Answer 1

我会用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类。

随着Modernizr的

CSS

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

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

没有的Modernizr

CSS

.js-visible { 
    display:none; 
} 

JS（实际上jQuery的不痛打的码S充足）

$('.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返回并提交一次的内容