轉換一個@ Html.Textbox按鈕來提交按鈕

Question

我想轉換一個@Html.Textbox圖像按鈕到submit按鈕與onclick調用一個Javascript函數，但我似乎無法弄清楚驗證部分。我相信它確實需要成爲一個提交按鈕。

我基本上試圖擺脫圖像，但保持功能。

以下是今天的工作。

@Html.TextBox("Next", null, new {type = "image", src = @Url.Content("../App_Themes/icons/button_next.png"), @class = "imgbottom", onclick = "javascript: ValidateSelection ($(\"[name$='selectedItems']:checked\"))"}) 


function ValidateSelection(item) { 

if (item == null || item.length == 0) { 

    var validationSummary = $('.validation-summary-errors ul'); 
    if (validationSummary.length > 0 && $('.validation-summary-errors ul li').length == 0) { 
     validationSummary.append('<li>' + "Please select at least one item" + '</li>'); 
    } 
    var errors = $("[name='ErrorMessage']"); 
    if (errors.length > 0) { 
     errors.hide(); 
    } 
    var buttonGenerateReport = $("#GenerateReport"); 
    if (buttonGenerateReport.length > 0) { 
     buttonGenerateReport.hide(); 
    } 
    event.preventDefault(); 
} 

}

Answer 1

<button type="submit" class="imgbottom" onclick="ValidateSelection('selectedItems');"> 
    <img src="@Url.Content("~/App_Themes/icons/button_next.png")" alt="Next" /><br /> 
    Next 
</button> 

URL內容字符串的一部分"~/"代表你的項目的根，所以調整後來到適合你的正確的文件地址。您可以使用FontAwesome並完全替換您的圖片。由於CSS的原因，它的大小可擴展，並且語法更簡單。

<button type="submit" class="imgbottom" onclick="ValidateSelection('selectedItems');"> 
    <i class="fa fa-angle-double-right" aria-hidden="true"></i> Next 
</button> 

然後在您的jQuery函數：

function ValidateSelection(elementName){ 
    var selectedItems = $("[name='" + elementName + "']:checked"); 

    if (selectedItems === null || selectedItems.length === 0) { 
     var validationSummary = $('.validation-summary-errors ul'); 

     if (validationSummary.length > 0 && $('.validation-summary-errors ul li').length == 0) { 
      validationSummary.append('<li>' + "Please select at least one item" + '</li>'); 
     } 
     var errors = $("[name='ErrorMessage']"); 
     if (errors.length > 0) { 
      errors.hide(); 
     } 
     var buttonGenerateReport = $("#GenerateReport"); 
     if (buttonGenerateReport.length > 0) { 
      buttonGenerateReport.hide(); 
     } 
     event.preventDefault(); 
    } 
}