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 Content字符串的"~/"部分代表您的项目根目录，因此请稍后调整它以适合您正确的文件地址。

或者您可以使用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();
    }
}

转换@ Html.Textbox按钮以提交按钮

1 个答案: