Как избежать дублирования тегов скрипта при создании пользовательских вспомогательных расширений Html в MVC

#javascript #asp.net-mvc #html-helper

#javascript #asp.net-mvc #html-помощник

Вопрос:

Я создаю вспомогательное расширение Html для отображения пользовательского элемента управления загрузкой файлов. Для работы некоторых функций на стороне клиента мне нужно, чтобы этот скрипт присутствовал при использовании моего помощника.

 function CheckSize(fileSize,id)
{
   var fileElement = document.getElementById(id);

   if (fileElement .files !== undefined) {
            var megaBytes = (fileInputs[0].files[0].size / 1024) / 1024;

            if (megaBytes > fileSize) {
                //Do Something
            }
}
 

Чтобы убедиться, что этот скрипт присутствует, мне нужно будет вставить его в Html helper, как показано ниже.

  public static class UploadControlExtensions
  {
    public static string UploadControl(this HtmlHelper helper, 
    UploadControlSettings settings)
    {

        string script = GetScript();
        string html = string.format("<input id='{0}'
        onchange='CheckSize({0},{1})'",settings.Id,setting.MaxSize);


        return script   html;
    }
  }
 

Это нормально, если на странице есть только один экземпляр моего элемента управления, но если их несколько, то один и тот же скрипт вставляется на страницу несколько раз.

Есть ли элегантный способ гарантировать, что вставлена только одна версия моего скрипта? Я знаю, что могу добавить его в свой проект отдельно, но я бы предпочел, чтобы мой класс расширения HtmlHelper справился со всем этим за вас.

Ответ №1:

Вы можете сохранить состояние в ViewData виде:

 public static class UploadControlExtensions
{
    public static string UploadControl(this HtmlHelper helper, UploadControlSettings settings)
    {
        var viewData = helper.ViewContext.Controller.ViewData;
        string script = String.Empty;
        if (!viewData.ContainsKey("UploadScriptPresent"))
        {
            script = GetScript();
            viewData.Add("UploadScriptPresent", true);
        }
        string html = string.format("<input id='{0}' onchange='CheckSize({0},{1})'", settings.Id, setting.MaxSize);

        return script   html;
    }
}