Autopopulate text box not working in edit page

Blooming Developer 276 Reputation points
2021-11-25T03:45:23.187+00:00

Hi ,

I have a autopopulate field like this

152436-image.png

this will insert email address of the users as a comma-separated string.
My Issue is i want to show this field as it is in the edit page. but my edit page displays something like this

152416-image.png

It is not showing the close icon and all.Any help would be appreciated

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,777 questions
{count} votes

Accepted answer
  1. Zhi Lv - MSFT 32,941 Reputation points Microsoft Vendor
    2021-11-26T07:22:36.363+00:00

    Hi @Blooming Developer ,

    How can i display the first name and last name?I tried the ajax calling,but its showing undefined error.
    when i clcik the close icon its showing Uncaught refrence error

    From your description and the code in the create page, you want to show/select/delete the tag with the username and email. Based on this scenario, I created another sample, you could refer to it:

    create a view model which contains the full name and the email address:

    public class ExistTags  
    {  
        public string Name { get; set; } //name:  firstName + " " + lastName  
        public string Email { get; set; } //email address  
    }  
    

    [Note] This model is used to display the selected tags in the view page. You can also add it as a database field.

    In the Form.cshtml.cs page OnGet method: this time we use the ViewData to bind the exist selected tags

        public void OnGet()  
        {  
            //RequestFormMaster = new RequestFormModel()  
            //{  
            //    ExistTags = "******@hotmail.com,******@hotmail.com"  
            //};  
    
            // you can query the database and get the selected tag and the related email.   
            var existtags = new List<ExistTags>()  
                {  
                    new ExistTags(){ Name="Teena John", Email = "******@mail.com"},  
                    new ExistTags(){ Name="David Smith", Email = "******@mail.com"}  
                };  
    
            //required using System.Text.Json;   
            //convert the object to json string, then we can store it in the hidden field.  
            var jsonstring = JsonSerializer.Serialize(existtags);  
            //use ViewData to transfer data.  
            ViewData["existtag"] = jsonstring;  
        }  
    

    Code in the Form.cshtml: check the hidden field, and the style tag is used to add spacing between the select tags.

    152769-capture.png

    You can view the page source from here: 152851-formcshtml.txt

    After page load, the hidden field looks like this:

    152747-image.png

    The debug output is like this:

    152725-1.gif

    [Note] There might have a question: in the above sample, after editing, the selected tag was stored in the alltags array, so when you submit the form to save change. You might need to get the selected tag from the alltags array. Or when you add the tag element, you could add the name attribute, then when submitting the form to the Post method, you can get the value via the name attribute.


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Dillion

    1 person found this answer helpful.

1 additional answer

Sort by: Most helpful
  1. Zhi Lv - MSFT 32,941 Reputation points Microsoft Vendor
    2021-11-25T10:05:29.29+00:00

    Hi @Blooming Developer ,

    this will insert email address of the users as a comma-separated string.
    My Issue is i want to show this field as it is in the edit page. but my edit page displays something like this

    Since you store the select tag using a comma-separated string, to show the multiple select tags behavior in the edit page, you could refer to the following code:

    1. In the RequestFormMaster model user a ExistTags property to store the selected tags.
      public class RequestFormModel  
      {  
          public string RequestStakeHolders { get; set; }  
          public string ExistTags { get; set; }  
      }  
      
    2. On the Edite page's OnGet method, query the database and set the existing data. Here I'm just creating a new instance as an example.
      public class FormModel : PageModel  
      {  
          public RequestFormModel RequestFormMaster { get; set; }  
          public void OnGet()  
          {  
              RequestFormMaster = new RequestFormModel()  
              {   
                  ExistTags = "******@hotmail.com,******@hotmail.com"  
              };  
          }  
      
    3. In the Edit page( Form.cshtml), use a hidden field to store the ExistTags , after the document is ready, use JQuery to get the ExistTags from the hidden field, then call the addTag() function to show the tag. [Note] Here we are using the similar JavaScript code like the Create page, the difference is that we need to get the ExistTags from the hidden field and show them. html code: <input type ="hidden" id="existtags" value="@Model.RequestFormMaster.ExistTags" /> JavaScript code:
      //get the existing tag  
      var existtags = $("#existtags").val().split(',');  
      //loop through the tag, and show them  
      //note: from your description, you are store the select tag using email address,  
      //so here if you want to display the related name,   
      //perhaps you need to use jquery ajax to get them based on the email.  
      $.each(existtags, function(index, item){  
          addTag(item,item);  
      });   
      
      The result is like this: 152567-image.png [Note]From your description, you are store the email address as the selected tag, so when you edit them, if you want to display the related name, you need to use JQuery ajax to get them based on the email, or before return to the edit view, get the name based on the email address, and use another hidden field to them. Then, use the same workflow to get the name and display them.

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Dillion


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.