選擇實體

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返回並提交一次的內容